Кнопка «обратно к верхней» на домашней странице Taobao выглядит следующим образом: кнопка будет отображаться после вытягивания на определенное расстояние. Нажмите кнопку медленно назад к вершине
Давайте сначала проанализируем, какие события необходимо добавить, чтобы достичь такого эффекта. Переместите мышь в кнопку и выходите из кнопки, а также изменяется производительность кнопки, поэтому вам необходимо добавить события MouseOver и Mouseout в кнопку. Чтобы прослушать изменения в прокрутке, вам нужно добавить событие прокрутки в окно, нажмите кнопку, чтобы вернуться в верхнюю часть, и добавить событие нажатия в кнопку. Мы инкапсулируем обработчик событий в три функции Movein, Moveout, Gotop;
Вот код HTML/CSS
Кода -копия выглядит следующим образом:
<div>
<div> голова </div>
<div> Основной контент, высота составляет 2000px </div>
<divbtn "> Вернуться к вершине </div>
</div>
Кода -копия выглядит следующим образом:
.container {ширина: 980px;
.content {высота: 2000px;
#btn {
позиция: исправлена;
Внизу: 50px;
Справа: 0;
Ширина: 54px;
Высота: 55px;
Фон: url (icons.png) без повторного замены 0 -110px;
размер шрифта: 12px;
высота линии: 55px;
Текст-альбом: Центр;
Текст -интент: -9999EM;
курсор: указатель;
дисплей: нет;
Ниже приведен полный код JS
Кода -копия выглядит следующим образом:
window.addeventlistener ("load", function () {
var btn = document.getElementById ("btn");
btn.addeventlistener ("Mouseover", Movin, false);
btn.addeventlistener ("Mouseout", Moveout, false);
функция movein () {
btn.style.color = "#ffffff";
btn.style.textindent = "0em";
btn.style.backgroundimage = "none";
btn.style.backgroundcolor = "#ff4401";
}
функция Moveout () {
btn.style.textIndent = "-9999EM";
btn.style.backgroundimage = "url (icons.png)";
}
Функция gotop (ускорение, время) {// изменять параметры, чтобы настроить скорость, чтобы вернуться к вершине
Ускорение = ускорение || 0,1;
время = время || 10;
var speed = 1 + ускорение;
Функция getScrolltop () {// Получить вертикальное расстояние от полоса прокрутки
return document.documentelement.scrolltop ||.
}
Функция SetScrolltop (значение) {// Установите вертикальное расстояние от стержня прокрутки.
document.documentelement.scrolltop = value;
document.body.scrolltop = value;
}
window.onscroll = function () {
var scrolltop = getscrolltop ();
if (scrolltop> 100) {// При определении того, как далеко прокрутка прокрутки от верхней части окна, это 100px
btn.style.display = "block";
} еще {
btn.style.display = "none";
}
};
btn.onclick = function () {
var Timer = setInterval (function () {
SetScrolltop (math.floor (getscrolltop () /speed));
if (getscrolltop () == 0)
ClearInterval (таймер);
}, время);
};
}
gotop (0,2, 8);
}, ЛОЖЬ);
Конечно, есть и другие методы реализации, и ниже приведены коды ключевых для других методов
Кода -копия выглядит следующим образом:
btn.onclick = function () {
ClearInterval (таймер);
var Timer = setInterval (function () {
var теперь = scrolltop;
speed = (0 - сейчас) / 10;
speed = math.floor (скорость);
if (теперь == 0);
ClearInterval (таймер);
document.documentelement.scrolltop = сейчас + скорость;
document.body.scrolltop = сейчас + скорость;
}, 15);
}
Код здесь в основном относится к другим ресурсам в Интернете и добавляет немного вашего собственного понимания. Конечно, существуют другие методы реализации, такие как window.scrollto (), которые JavaScript поддерживает в самое раннее время. Если вы реализуете его с помощью JQ, том кода станет очень маленьким
Лично я думаю, что сначала будет гораздо проще выучить нативный JavaScript, например, выяснить типы данных, закрытие, наследование, область областей, DOM, CSS, обработка событий, AJAX и т. Д., А также изучение других структур после мастерства.