Примечание · Различные реализации прокрутки полосы прокрутки до указанной позиции (точки привязки)

JavaScript
Примечание · Различные реализации прокрутки полосы прокрутки до указанной позиции (точки привязки)

В недавнем проекте возникла традиционная проблема с точкой привязки. Так в чем проблема точки привязки?

Якорь — это своего рода гиперссылка в производстве веб-страницы, также называемаяназванный якорь. названные якоря, как стрижлокаторТо же самое гиперссылка на странице, которая довольно распространена. И может быстро найти контент сайта через меню.

На рисунке выше показана схема точки привязки Как мы можем выполнить это требование? Ниже я приведу несколько методов привязки, которые можно использовать в разных сценариях.

1.first blood

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

<a href="#content1">Menu1</a>
<a href="#content2">Menu2</a>

<div id="content1">Content1</div>
<div id="content2">Content2</div>

Это якорное решение, предоставленное нам тегом a.

2.double kill

Собственный js для получения и изменения scrollTop

В этом случае мы обычно используем настройки привязки для фиксированных элементов страницы или устанавливаем кнопку «Вверх».

    // 通过element.scrollTop来获取当前元素滚动条高度
    // 可以在控制台输出下
    document.documentElement.scrollTop  ====> number  
    // 返回一个number类型的内容，是滚动条的高度
    
    
    // 也可以通过给scrollTop赋值去设置滚动条高度
    // 在控制台输出
    document.documentElement.scrollTop = 0
    // 会发现已经滚动的滚动条，滚动到页面最顶端。

В мире js совместимость с браузером всегда такая головная боль

Safari использует window.pageyoffset Т.е. документ .body.scrolltop и document.docenteLement.scrolltop;

Таким образом, принимая во внимание проблемы с совместимостью браузера, наконец-то получился идеально совместимый код.

    // 获取滚动条高度兼容性写法
    var scrollTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop;

3.triple kill

Элемент​.scroll​Into​View() Объяснение этого метода на MDN является функцией эксперимента, но основные браузеры доступны и на удивление просты в использовании. Нечего сказать, сразу к коду.

    // 将某个元素跳转到浏览器视口的最上方
    element.scrollIntoView()

грамматика:

    // 等同于element.scrollIntoView(true) 
    element.scrollIntoView();
    
    // Boolean型参数
    // true  元素的顶端将和其所在滚动区的可视区域的顶端对齐 ； false 元素的底端将和其所在滚动区的可视区域的底端对齐 
    element.scrollIntoView(alignToTop); 
    
    // 一个带有选项的object：
    // {
    //     behavior: "auto"(默认)  | "instant" | "smooth"(缓动),
    //     block:    "start" | "end",
    // }
    element.scrollIntoView(scrollIntoViewOptions); // Object型参数

4.quadra kill

В настоящее время реализована базовая функция привязки, и нажатие меню позволяет перейти к соответствующему содержимому.

Но все равно выглядит немного жестковатым.咻~ закончился, поэтому добавьте смягчение, чтобы улучшить взаимодействие с пользователем.

Добавьте предложение к стилю div, который нужно прокручивать.

scroll-behavior: smooth; // 滚动条缓慢滚动

5.penta kill

На данный момент полная медленная прокрутка точки привязки завершена, попробуйте! ! !

Категории