TechBlogSD - Все для WordPress і WEB розробки
WEB і WordPress інструкції, новини, огляди тем та плагінів

Як створити прокрутку до верхнього віджета для свого веб -сайту?

12

Повернутися до початку або прокрутити вгору – це функція, яка дозволяє переходити у верхню частину сторінки, натискаючи на стрілку, яка зазвичай розташована біля правого нижнього кута сторінки. Не завжди потрібно використовувати зображення для такого прокручування до верхньої функції. Оскільки кожне зображення надсилає на ваш сервер окремий HTTP -запит, це додасть загальний час завантаження сайту, і налаштувати зображення також не дуже просто. Щоб подолати це, ми пропонуємо нижче прокрутити до верхнього віджета з CSS та jQuery із чудовим значком замість зображення, щоб ви могли налаштувати його відповідно до макету вашого сайту.

Пов’язані: Як додати прокрутку до верхнього віджета на веб -сайті Weebly?

Віджет містить три частини:

  • CSS
  • Сценарій
  • HTML

1 CSS -код для віджета "На початок"

Нижче наведено код CSS для віджета та вставте його у розділ заголовка вашого сайту.

<style> .backtotop { background: none; margin: 0; position: fixed; bottom: 0; right: 0; width: 55px; height: 60px; z-index: 100; display: none; text-decoration: none; color: #808080; } .backtotop i { font-size: 50px; } </style> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">

Примітка: Замість зображення ми використовуємо чудовий значок шрифту, отже, необхідний CSS пов’язаний відповідно.

2 сценарій jQuery для віджета

Нижче наведено сценарій віджета, який потрібно розмістити в нижньому колонтитулі вашого сайту.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> <script> $(document).ready(function() { $('.backtotop').css({'display': 'none'}); var offset = 200; var duration = 600; $(window).scroll(function() { if ($(this).scrollTop() > offset) { $('.backtotop').fadeIn(duration); } else { $('.backtotop').fadeOut(duration); } }); $('.backtotop').click(function(event) { event.preventDefault(); $('html, body').animate({scrollTop: 0}, duration); return false; }) }); </script>

3 HTML для віджета

І, нарешті, нижче наведено HTML -код, який потрібно розмістити у тілі веб -сторінки, щоб увімкнути функцію повернення до початку.

<a href="#" class="backtotop" style="display: inline;"> <i class="fa fa-arrow-circle-up"></i> </a>

Налаштування функцій Back to Top

Перевагою використання цього віджета є те, що ви можете налаштувати повну функцію відповідно до ваших потреб. Ось деякі варіанти налаштування для вас:

Швидкість прокрутки

Швидкість прокрутки за замовчуванням у сценарії встановлена ​​як 600, яку можна збільшити або зменшити.

Особливість Код Де шукати
Швидкість прокрутки var тривалість = 600; Сценарій

Положення відображення значка прокрутки

Піктограма зі стрілкою почне відображатися, коли смуга прокрутки знаходиться в положенні 200 пікселів зверху, що визначено у сценарії з кодом нижче:

Особливість Код Де шукати
Початкове положення значка прокрутки був зміщений = 200; Сценарій

Ви можете змінити вихідне положення так, як вам потрібно.

Положення ікони

За замовчуванням піктограма зі стрілкою вгору відображатиметься на 60px вгору та на 55px від нижнього правого кута, як визначено у стилі CSS. Ви можете змінити його методом проб і помилок, щоб перевірити відповідну позицію для свого сайту.

Особливість Код Де шукати
Положення значка прокрутки в нижньому правому куті ширина: 55px; висота: 60px; Стиль

Стиль піктограми

Ми використали чудовий значок шрифту “fa-arrow-circle-up", який можна змінити у HTML-коді.

Особливість Код Де шукати
На початок Стиль піктограми <i class = “fa fa-arrow-circle-up”> </i> HTML

Зверніться до розділу піктограм спрямованості у списку чудових шрифтів, щоб використати альтернативну піктограму для свого сайту.

Розмір піктограми

Стандартний розмір 50 пікселів використовується як розмір шрифту для піктограми у стилі CSS, який можна змінити відповідно до ваших потреб.

Особливість Код Де шукати
На початок Розмір піктограми розмір шрифту: 50 пікселів; Стиль

Колір піктограми

Це найважливіша частина налаштування, де колір значка шрифту можна легко змінити відповідно до макета вашого сайту. Знайдіть код "колір: #808080;" у коді CSS та змініть його на будь -який колір, який вам потрібен.

Особливість Код Де шукати
На початок Колір піктограми колір: #808080; Стиль

Джерело запису: www.webnots.com
Залиште відповідь

Цей веб -сайт використовує файли cookie, щоб покращити ваш досвід. Ми припустимо, що з цим все гаразд, але ви можете відмовитися, якщо захочете. Прийняти Читати далі