Три способа вернуться в указанное место на странице

JavaScript

В прошлом большую часть времени я работал над проектами, связанными со стороной B. При реализации таких требований я обычно использовал прямую помощьaНадпись сделана, теперь она на стороне C, и требования к интерактивности сразу улучшены.aЭтикетки далеки от удовлетворения требований, а JS необходимо для достижения таких требований, которые настоящим записаны.

этикетка

Сначала отпустите html

<body>
    <contain class="test1">
        <a name="topAnchor"></a>
        <div id="top">我是顶部</div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </contain>
    <footer>
        <button id="backTop1">第一种方式回到顶部</button>
        <button id="backTop2">第二种方式回到顶部</button>
        <button id="backTop3">第三种方式回到顶部</button>
    </footer>
</body>

Затем конкретные шаги следующие

  1. Поместите тег a рядом с указанным элементом
  2. затем генерируется событием clickaЭтикетка
  3. вызыватьaметка события
  4. удалятьaЭтикетка

код показывает, как показано ниже

    const backTop1 = document.getElementById("backTop1")

    backTop1.addEventListener("click", function (e) {
        let a = document.createElement("a")
        a.href = "#topAnchor"
        e.target.appendChild(a)
        a.onclick = function (e) {
            e.stopPropagation()
        }
        a.click()
        e.target.removeChild(a)
    })

Результаты, как показано ниже

Эффект налицо, после срабатывания события страница сразу вылетает наверх, когда нет требований к интерактивности, такой подход действительно не проблема, но после высоких требований он не сработает, и появится немного неловко.По подсказке босса можно установить html, body {scroll-behavior:smooth; } в стиле, который может добиться того же эффекта, что и параметр поведения следующих двух APIs — smooth.

scrollTo()

Этот API должен передать расстояние элемента DOM относительно левой и верхней части окна.Этот пример показывает только простую демонстрацию и учитывает только верхнюю координату.
Конечно, у него также есть параметр поведения, после установки сглаживания будет эффект скольжения. Действуйте следующим образом:

  1. Рассчитать расстояние целевого элемента от вершины
  2. Активировано событиями

код показывает, как показано ниже:

    const backTop2 = document.getElementById("backTop2")
    const TOP = document.getElementById("top")
    const y = TOP.offsetTop
    const backTop3 = document.getElementById("backTop3")
    backTop3.addEventListener("click", function (e) {
        window.scrollTo({ top: y, left: 0, behavior: 'smooth' })
    })

Результаты, как показано ниже

По эффекту по сравнению сaтег, API поддерживает анимацию, что делает страницу более плавной Однако его поддержки iframe недостаточно, доля iframe в проектах, с которыми я сталкивался, не мала, используйте их с осторожностью.

Element.scrollIntoView()

По сравнению с предыдущим, этот API имеет более четкую информацию об узле и более простые методы работы, что более удобно для последующего обслуживания.
код показывает, как показано ниже

    const backTop2 = document.getElementById("backTop2")
    const TOP = document.getElementById("top")
    backTop2.addEventListener("click", function (e) {
        TOP.scrollIntoView({ behavior: "smooth" })
    })

Результаты, как показано ниже

С точки зрения эффекта, функции этого API и scrollTo одинаковы, но с точки зрения структуры кода scrollIntoView будет более кратким и хорошо работать в iframe, и в основном используется чаще.

После напоминания диггеров, вышеперечисленные три анимационных эффекта имеют некоторые проблемы с совместимостью, изначально с ними разобрались вчера, но вчера они сработали слишком поздно и отдали их голубям.
Без лишних слов, приступим к делу:

Универсальная версия элемента управления js вернуться к началу страницы

	const distance=70;// 滚动条每次滚动的距离
    function up(){
        let  start = document.documentElement.scrollTop;
        function gotop() {
            scrollTo(0, start - distance)
            start = start - distance
            if (start >0 ){
                window.requestAnimationFrame(gotop)
            }
        }
        window.requestAnimationFrame(gotop)
    }

Изначально использовался таймер, а позже использовался исходный код компонента backTop в elementUi, а также применялся requestAnimationFrame. Исходный код выглядит следующим образом:

const cubic = value => Math.pow(value, 3);
const easeInOutCubic = value => value < 0.5
  ? cubic(value * 2) / 2
  : 1 - cubic((1 - value) * 2) / 2;
  
    scrollToTop() {
      const el = this.el;// el如果是一个盒子，滚动条会在该盒子内滚动，若没被传参，则为整个页面
      const beginTime = Date.now();
      const beginValue = el.scrollTop;
      const rAF = window.requestAnimationFrame || (func => setTimeout(func, 16));
      const frameFunc = () => {
        const progress = (Date.now() - beginTime) / 500;
        if (progress < 1) {
          el.scrollTop = beginValue * (1 - easeInOutCubic(progress));
          rAF(frameFunc);
        } else {
          el.scrollTop = 0;
        }
      };
      rAF(frameFunc);
    }

Он использует математическую кривую для прокрутки. Независимо от того, насколько высоко содержание страницы, возврат наверх занимает примерно одно и то же время. То, что я написал, относительно жесткое, и я написал 70 прямо, 囧. Если интересно, можете изучить.портал исходного кода элемента пользовательского интерфейса
Полный пример этой статьи,портал

Категории