Как написать
【1】 якоря
Использование якорных ссылок - это простое возвращение на вершину. Эта реализация в основном помещает якорную ссылку с указанным именем в верхней части страницы, а затем помещает ссылку, чтобы вернуться на якорь под страницей. Пользователь нажимает ссылку, чтобы вернуться в верхнюю позицию, где находится якорь.
[Примечание] Подробная информация о точках якоря будет перемещена здесь
<body style = "height: 2000px;"> <div id = "topanchor"> </div> <a href = "#topanchor" style = "Положение: Исправлено; справа: 0; внизу: 0"> Вверху </a> </body>
【2】 Scrolltop
Свойство Scrolltop указывает количество пикселей, спрятанных над областью содержания. Когда элемент не прокручивается, значение Scrolltop равно 0. Если элемент прокручивается вертикально, значение Scrolltop больше 0 и указывает ширину пикселя невидимого содержания над элементом.
Поскольку Scrolltop можно записать, Scrolltop можно использовать для достижения функции вверх
[Примечание] Подробная информация о проблемах совместимости Scrolltop на странице перемещается здесь
<body style = "height: 2000px;"> <button id = "test" style = "Положение: исправлено; справа: 0; внизу: 0"> назад к верхню
【3】 Scrollto ()
Метод Scrollto (x, y) прокручивает документ, отображаемый в текущем окне, так что точки, указанные в координатах x и y в документе, расположены в верхнем левом углу области отображения.
Установите Scrollto (0,0), чтобы достичь эффекта возвращения на вершину
<body style = "height: 2000px;"> <button id = "test" style = "Положение: исправлено; справа: 0; внизу: 0"> назад к верху </button> <script> test.onclick = function () {scrollto (0,0);} </script> </body>【4】 Scrollby ()
Прокрутите метод Scrollby (x, y).
Просто используйте длину прокрутки текущей страницы в качестве параметра и прокрутите в обратном направлении, вы можете достичь эффекта возвращения в верхнюю часть.
<body style = "height: 2000px;"> <button id = "test" style = "position: fixed; справа: 0; внизу: 0"> назад к верху </button> <script> test.onclick = function () {var top = document.scrolltop || document.documentelement.scrolltopscrollby (0, -top);} </script> </body>【5】 scollintoview ()
Element.scrollintoview метод прокручивает текущий элемент и входит в видимую область браузера.
Этот метод может принять логическое значение в качестве параметра. Если это правда, это означает, что верхняя часть элемента выровнена с верхней частью видимой части текущей области (при условии, что текущая область прокручивается); Если ложь, это означает, что нижняя часть элемента выровнена с хвостом видимой части текущей области (при условии, что текущая область прокручивается). Если этот параметр не предоставлен, по умолчанию верно
Принцип использования этого метода аналогичен принципу использования якорных точек. Установите целевой элемент в верхней части страницы. Когда страница прокручивается, целевой элемент прокручивается за пределами области страницы. Нажмите на кнопку «Практику», чтобы вернуться в исходную позицию, и достичь ожидаемого эффекта.
<body style = "height: 2000px;"> <div id = "target"> </div> <button id = "test" style = "position: fixed; справа: 0; внизу: 0"> назад к верху </button> <script> test.onclick = function () {target.scrollintoview ();} </script> </body>Увеличен
Следующее усиливает функцию на вершину
【1】 Покажите улучшение
Используйте CSS, чтобы нарисовать и повернуть «обратно в топ» в визуальную графику (если совместим с IE8-Browser, используйте изображения вместо этого)
Используйте псевдоэлементные и псевдо-гоночные эффекты CSS. Когда мышь перемещается к элементу, отображается текст в верхнюю часть и не отображается при перемещении.
<style> .box {положение: исправлено; справа: 10px; внизу: 10px; высота: 30px; ширина: 50px; text-align: center; padding-top: 20px; фоновый цвет: LightBlue; граница-радий: 20%; переполнение: скрыто;}. Box: Hover: до {Top: 50%}. Box: Hover .Box-In {Visibility: Hidden;}. Box: до {позиция: абсолют; верх: -50%; слева: 50%; Transform: Translate (-50%,-50%); 40px; color: peru; font-weight: bold;} .box-in {видимость: видимый; отображение: встроенный блок; высота: 20px; ширина: 20px; граница: 3px сплошной черный; id = "box"> <div> </div> </div> </body>【2】 Улучшение анимации
Чтобы добавить анимацию в верхнюю
Существует два типа анимации: один - это анимация CSS, которая требует изменения стиля и перехода; Другой - анимация Javascript, которая использует таймер для его реализации.
В приведенных выше 5 реализациях методы Scrolltop, Scollto () и Scollby () могут добавлять анимации, и, поскольку не изменяется стиль, можно добавить только анимации JavaScript
Таймер может быть использован, SetInterval, SetTimeout и RequestAnimationFrame. Следующим является использование наилучшего Timer RequestAnimationFrame для его реализации.
[Примечание] IE9-Browser не поддерживает этот метод, вы можете использовать SetTimeout для совместимости
1. Добавить эффект анимации Scrolltop
Используя таймер, уменьшайте значение Scrolltop на 50 каждый раз, пока он не будет уменьшен до 0, а анимация закончена
<script> var timer = null; box.onclick = function () {cancelanimationframe (timer); timer = requestAnimationFrame (function fn () {var otop = document.body.scrolltop || document.documentelement.scrolltop; if (otop> 0) {document.scrollom.soclom - 50; timer = requestAnimationFrame (fn);} else {cancelanimationFrame (timer);}});} </script>2. Добавить эффект анимации scrollto ()
Получите параметр y в Scrollto (x, y) через значение Scrolltop, уменьшайте его на 50 каждый раз, пока он не уменьшится до 0, а анимация закончена
<script> var timer = null; box.onclick = function () {cancelanimationFrame (timer); timer = requestAnimationFrame (function fn () {var otop = document.body.scrolltop || document.documentelement.scrolltop; if (otop> 0) {scrollto (0, Otop-50; requestAnimationFrame (fn);} else {cancelanimationFrame (timer);}});} </script>3. добавить эффект анимации Scrollby ()
Установите параметр y в Scrollby (x, y) на -50, пока Scrolltop не станет 0, затем откат останавливается
<script> var timer = null; box.onclick = function () {cancelanimationFrame (timer); timer = requestAnimationFrame (function fn () {var otop = document.body.scrolltop || document.documentelem requestAnimationFrame (fn);} else {cancelanimationFrame (timer);}});} </script>выполнить
Поскольку методы Scrolltop, Scrollby () и Scrollto () используют, уменьшается ли значение Scrolltop до 0 в качестве ссылки для остановки анимации, а принципы и реализации трех анимаций в основном похожи, а производительность также аналогична. Наконец, эффект улучшения анимации достигается с помощью наиболее часто используемого атрибута Scrolltop
Конечно, если вы думаете, что скорость 50 не подходит, вы можете настроить ее в соответствии с фактической ситуацией
<style> .box {положение: исправлено; справа: 10px; внизу: 10px; высота: 30px; ширина: 50px; text-align: center; padding-top: 20px; фоновый цвет: LightBlue; граница-радий: 20%; переполнение: скрыто;}. Box: Hover: до {Top: 50%}. Box: Hover .Box-In {Visibility: Hidden;}. Box: до {позиция: абсолют; верх: -50%; слева: 50%; Transform: Translate (-50%,-50%); 40px; color: peru; font-weight: bold;} .box-in {видимость: видимый; отображение: встроенный блок; высота: 20px; ширина: 20px; граница: 3px сплошной черный; id = "box"> <div> </div> </div> </body> <script> var timer = null; box.onclick = function () {cancelanimationFrame (timer); timer = requestAnimationFrame (function fn () {var otop = document.scrolltop | состоял document.documentelement.scrolltop; 0) {document.body.scrolltop = document.documentelement.scrolltop = otop - 50; timer = requestAnimationFrame (fn);} else {cancelanimationFrame (timer);}});} </script>Выше приведено полное описание пяти методов написания (от реализации до улучшения), основанного на реализации JS для вас, что я представил вам. Я надеюсь, что это будет полезно для вас. Если у вас есть какие -либо вопросы, пожалуйста, оставьте мне сообщение. Редактор ответит вам вовремя. Большое спасибо за вашу поддержку сайта wulin.com!