Многие веб -страницы будут размещать кнопку «Назад к верхнему» ниже, особенно веб -страницы, которые не имеют навигации внизу страницы, которая может помочь посетителям снова найти навигацию или вернуться к объявлению (оно так красиво). Поскольку JavaScript становится все более и более широко используемым в последние годы, скользящий эффект повсюду, поэтому я следил за тенденцией и сделал возврат к верхней функции, чтобы создать скользящий эффект. Позже, чтобы лучше соответствовать физическим характеристикам, скользящий эффект замедления был преобразован.
Давайте сначала поговорим о принципе. Мы получим расстояние от полосы прокрутки до верхней части страницы, а затем переместим его на определенное расстояние; Затем получите расстояние от полосы прокрутки до вершины страницы и перенесите его на определенное расстояние (немного меньше, чем в последний раз); и так далее...
<script type = "text/javascript">/*** Вернувшись в верхнюю часть страницы* @param Ускорение ускорения* @param Интервал времени времени (MS) **/Функция Gotop (ускорение, время) {Acceleration = Acceleration || 0,1; время = время || 16; 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.scroly || 0; // горизонтальное расстояние от полосы прокрутки до верхней части страницы var x = math.max (x1, math.max (x2, x3)); // Вертикальное расстояние от полосы прокрутки до верхней части страницы var y = math.max (y1, math.max (y2, y3)); // расстояние прокрутки = расстояние/скорость тока, поскольку расстояние меньше, а скорость превышает 1, расстояние прокрутки станет меньше и меньше скорости VAR = 1 + ускорение; window.scrollto (math.floor (x / speed), math.floor (y / speed)); // Если расстояние не равна нулю, продолжайте вызовать функцию итерации, если (x> 0 || y> 0) {var invokefunction = "gotop (" + acceleration + "," + time + ")"; window.settimeout (invokefunction, время); }} </script>document.documentelement.scrolltop, document.body.scrolltop, window.scroly на самом деле одинаковы, но они работают только в некоторых браузерах. Что касается того, для которых работают браузеры, вы можете отладить это самостоятельно.
Как его использовать?
Кода -копия выглядит следующим образом:
<a href = "#" onclick = "gotop (); вернуть false;"> top </a>