Как добавить на свой сайт удобную и быструю кнопку «Вернуться наверх» с маленькой иконкой? Как показано ниже:
Исходный код JS:
/**
* Пример реализации JavaScript-скрипта для возврата в начало страницы
* @param acceleration скорость
* @param stime временной интервал (миллисекунда)
**/
function gotoTop(acceleration,stime) {
acceleration = acceleration || 0.1;
stime = stime || 10;
var x1 = 0;
var y1 = 0;
var x2 = 0;
var y2 = 0;
var x3 = 0;
var y3 = 0;
if (document.documentElement) {
x1 = document.documentElement.scrollLeft || 0;
y1 = document.documentElement.scrollTop || 0;
}
if (document.body) {
x2 = document.body.scrollLeft || 0;
y2 = document.body.scrollTop || 0;
}
var x3 = window.scrollX || 0;
var y3 = window.scrollY || 0;
// Расстояние по горизонтали от полосы прокрутки до верхнего края страницы.
var x = Math.max(x1, Math.max(x2, x3));
// Расстояние по вертикали от полосы прокрутки до верхнего края страницы.
var y = Math.max(y1, Math.max(y2, y3));
// расстояние прокрутки = Текущее расстояние / скорость, Потому что расстояние оказывается меньше, скорость больше, чем 1 число, такрасстояние прокрутки будут становиться все меньше и меньше
var speeding = 1 + acceleration;
window.scrollTo(Math.floor(x / speeding), Math.floor(y / speeding));
// Если расстояние не равно нулю, Продолжайте вызывать функцию
if(x > 0 || y > 0) {
var run = "gotoTop(" + acceleration + ", " + stime + ")";
window.setTimeout(run, stime);
}
}
Исходный код HTML:
<div onClick="gotoTop();return false;" style="position:fixed;right:10px;bottom:15%;"><img src="http://images.cnblogs.com/cnblogs_com/wangduo/882494/o_top.png" width=36px;height=36px></div>
Применимые браузеры: IE8, 360, FireFox, Chrome, Safari, Opera, Maxthon, Sogou и Window of the World.
Это так просто, это так сознательно! Если вы полны индивидуальности, попробуйте прямо сейчас!
Если вы ничего не понимаете в коде, вы можете оставить сообщение сБлогеробщаться!
Перепечатано по адресу: https://www.cnblogs.com/wangduo/p/6044435.html.
Заявление об авторских правах: Содержание этой статьи добровольно предоставлено пользователями Интернета, а мнения, выраженные в этой статье, представляют собой только точку зрения автора. Данный сайт лишь предоставляет услуги по хранению информации, не имеет никаких прав собственности и не несет соответствующей юридической ответственности. Если вы обнаружите на этом сайте какое-либо подозрительное нарушение авторских прав/незаконный контент, отправьте электронное письмо, чтобы сообщить. После проверки этот сайт будет немедленно удален.
Издатель: Full stack программист и руководитель стека. Пожалуйста, укажите источник для перепечатки: https://javaforall.cn/185339.html Исходная ссылка: https://javaforall.cn.