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

Як додати кнопку прокручування до верхньої кнопки на веб -сайті Weebly?

0

Прокрутка вгору – це проста і корисна функція, яка використовується для переходу вгору веб -сторінки будь -де знизу. Можливо, ви помітили стрілку вгору у правому нижньому куті більшості сайтів, і натиснувши на зображення зі стрілкою, ви потрапите у верхню частину цієї сторінки. Це корисна функція, особливо для сторінок з довгим вмістом. У цій статті пояснюється, як додати прокрутку вгору або назад до верху на своєму безкоштовному веб -сайті Weebly. Дізнайтесь більше 200 безкоштовних підручників Weebly для оптимізації вашого сайту Weebly.

Нижче наведено короткий опис кроків, необхідних для додавання прокрутки до верхньої або верхньої частини кнопки:

  1. Завантажте та змініть файл прокрутки до верхнього файлу JavaScript.
  2. Завантажте зображення зі стрілкою вгору.
  3. Завантажте файл JavaScript та зображення на свій сайт Weebly.
  4. Додати прокрутку вгору на всіх сторінках.
  5. Додайте прокрутку вгору на певних сторінках.

Давайте детально обговоримо кожен крок.

Крок 1: Завантажте та змініть файл сценарію

  • Завантажте zip -файл та розпакуйте його у файл JavaScript під назвою “scrolltopcontrol.js".
  • Відкрийте файл у редакторі, наприклад Блокнот або TextEdit, і знайдіть код img src = “up.png”.
  • Замініть його шляхом зображення вашого сайту Weebly, як показано нижче:
img src="https://yoursitename.weebly.com/files/theme/up_arrow.png"
  • Збережіть змінений файл.

Крок 2: Завантажте зображення зі стрілкою вгору

Крок 3: Завантаження файлів на ваш веб -сайт Weebly

  • Увійдіть у свій обліковий запис Weebly і виберіть сайт, який потрібно додати до прокрутки до верхньої функції.
  • У редакторі Weebly перейдіть на вкладку «Тема», а потім натисніть кнопку «Редагувати HTML/CSS ».
  • Натисніть на значок «+» на вкладці «Активи», виберіть «Завантажити файл (и)» зі спадного меню та завантажте змінений файл «scrolltopcontrol.js».
  • Таким же чином завантажте файл зображення “up_arrow.png”.
  • Збережіть свою тему, якщо це перший раз, коли ви завантажуєте файли на свій сайт, вам буде запропоновано ввести нову назву теми для вашого сайту. Введіть нову назву теми та збережіть зміни.

Тепер ви майже закінчили, і у вас є два варіанти додавання прокрутки до верхньої функції:

  1. Додайте до всіх сторінок сайту.
  2. Тільки на певних сторінках.

Як додати кнопку прокручування до верхньої кнопки на веб -сайті Weebly?

Завантаження файлу на веб -сайт Weebly

Крок 4: Додавання прокрутки до початку на всіх сторінках

Скопіюйте наведений нижче код та змініть його, замінивши “youritename.weebly.com” на справжнє ім’я сайту Weebly.

<script type="text/javascript" src="https://yoursitename.weebly.com/files/theme/scrolltopcontrol.js"></script>

Перейдіть на вкладку «Налаштування» у редакторі Weebly і вставте код у поле «Код заголовка» в розділі «SEO», як показано на малюнку нижче.

Як додати кнопку прокручування до верхньої кнопки на веб -сайті Weebly?

Додати код на домашню сторінку сайту Weebly

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

Попередження: Якщо функція прокрутки не працює, спробуйте вставити код у розділ «Код нижнього колонтитула» замість розділу «Код заголовка».

Крок 5: Додавання прокрутки до початку на певних сторінках

Перейдіть на вкладку «Сторінки» в редакторі Weebly і виберіть сторінку, до якої потрібно додати прокрутку до верхньої функції. Натисніть на посилання «Додаткові налаштування» та вставте код вище у поле «Код заголовка », як показано на малюнку нижче. Не забудьте замінити “youritename.weebly.com” на вашу справжню назву сайту Weebly.

Як додати кнопку прокручування до верхньої кнопки на веб -сайті Weebly?

Додати код на єдиній сторінці Weebly

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

Використання тексту "На початок"

Якщо ви хочете використовувати текст замість зображення, просто додайте нижченаведений код будь -де на своїй сторінці за допомогою елемента " Вставити код ".

<a href="#top">Back to Top</a>

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

Примітка. Замість #top ви можете використовувати будь -який якір HTML на своїй сторінці для прокрутки до цієї позиції.

Зміна цільового пункту призначення елемента керування "Прокрутити до верху"

Коли ви натискаєте стрілку вгору, смуга прокрутки за замовчуванням буде переміщена у верхню частину сторінки. Якщо ви хочете перейти до будь -якої іншої позиції, ви можете керувати нею, змінивши атрибут “scrollto” всередині файлу .js. Наприклад, зміна “scrollto: 0” на “scroll: 100” перемістить смугу прокрутки на 100 пікселів нижче верхньої позиції. Ви також можете перемістити позицію до будь -якого елемента, визначеного на вашій сторінці, використовуючи два кроки нижче.

  • Крок 1 – Визначте елемент – Наприклад, щоб визначити H2, використовуйте елемент коду вбудовування та додайте код нижче:
<h2 id="movehere">Move the Scroll bar here </h2>
  • Крок 2 – Потім змініть атрибут як scrollto: “movehere” всередині файлу .js, як показано нижче:
setting: {startline:100, scrollto: "movehere", scrollduration:1000, fadeduration:[500, 100]},

Це призведе до переміщення смуги прокрутки до позиції заголовка H2, коли ви натискаєте стрілку вгору або назад до верхнього посилання.

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

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