Содержание
Кнопки Back to Top очень полезны в блогах и на сайтах. Кнопка «Вверх» используется для облегчения чтения, если читатели хотят прокрутить страницу вверх.
Кроме того, вы будете ошеломлены, если кнопка поднимает анимацию прокрутки, когда страница поднимается. Такие кнопки называются плавными кнопками прокрутки. Итак, вот учебник о том, как реализовать плавную прокрутку кнопки «вверх» в вашем блоге WordPress .
NOTE: Если вы ищете кнопку Scroll to Top without Javascript затем следуйте этому уроку .
Вот шаги:
Шаг 1
Поместите ниже CSS-файл в тему WordPress style.css файл.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
|
.crunchify-top: hover {
цвет : #fff ! важно ;
цвет фона : # ed702b ;
текстовое оформление : нет ;
}
.crunchify-top {
дисплей : нет ;
положение : исправлено ;
дно : 1рем ;
правильно : 1рем ;
ширина : 3,2рем ;
высота : 3,2рем ;
высота строки : 3,2рем ;
размер шрифта : 1.4рем ;
цвет : #fff ;
цвет фона : ргба ( 0,0,0,0,3 ) ;
текстовое оформление : нет ;
пограничный радиус : 3,2рем ;
выравнивание текста : центр ;
курсор : указатель ;
}
|
Другие должны читать:
- Genesis Framework: как отключить размещение мета-информации на домашней странице
- Как использовать AJAX, jQuery в Spring Web MVC (.jsp) — Пример
Шаг 2
Поместите ниже функцию Script для вашей темы header.php , На Crunchify мы используем наш собственный плагин All in One для веб-мастеров, который имеет раздел « Верхний / нижний колонтитул ».
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
|
< ! — Crunchify 's манускрипт в верхний скрипт — >
<скрипт>
JQuery ( документ ) . готов ( функция ( ) {
вар смещение знак равно 220 ;
вар продолжительность знак равно 500 ;
JQuery ( окно ) . прокрутка ( функция ( ) {
если ( jQuery ( это ) . scrollTop ( ) > смещение ) {
jQuery ( .crunchify-top ) . исчезновение ( продолжительность ) ;
} еще {
jQuery ( .crunchify-top ) . fadeOut ( длительность ) ;
}
} ) ;
jQuery ( .crunchify-top ) . нажмите ( функция ( событие ) {
событие. protectDefault ( ) ;
JQuery ( «HTML, тело» ) . анимировать ({scrollTop: 0 } , продолжительность ) ;
вернуть ложь ;
} )
} ) ;
|
Шаг 3
Откройте свою тему footer.php файл и добавить строку ниже в этом.
|
1
|
< а href = # class = crunchify-top > ↑ < / a >
|
Вы можете проверить это тоже самое на этом сайте. Достаточно взглянуть на правый нижний угол, и вы увидите кнопку «Прокрутить до верха».
0.00 (0%) 0 votes
