锚点 smooth-scrolljs库 平滑滚动 / scrollIntoView

在项目中需要进行点击移动页面位置，第一个想到的就是锚点 配合 smooth-scroll

锚点 配置 smooth-scroll

安装

npm install smooth-scroll

或者直接下载 使用GitHub - cferdinandi/smooth-scroll：一个轻量级脚本，用于对滚动到锚点链接进行动画处理。

使用 

我是npm安装的需要页面中引入

import SmoothScroll from 'smooth-scroll'

页面中使用的是 a 标签，选中标签，添加配置

let scroll = new SmoothScroll('a[href*="#"]',{
    speed: 1000, // 动 1000px 所需的毫秒时间
    easing: 'easeInOutQuint' // 缓动模式
});

SmoothScroll的第一个参数是一个选择器 这里是选中了 所有锚点跳转的a标签，第二个参数是动画的配置 常用的就这2个，可能你还会用到

offset 跳转后的偏移 （数字）：比如我们需要跳转后和页面顶端有一定距离，可以设置一个 20 50之类的正数

更多的配置项可以看 官方的说明GitHub - cferdinandi/smooth-scroll：一个轻量级脚本，用于对滚动到锚点链接进行动画处理。

配置完成后，我们只需要编写html代码即可

<nav id='nav'>
    <a data-easing="scroll" href="#header">h</a> |
    <a data-easing="scroll" href="#main">m</a> |
    <a data-easing="scroll" href="#footer">f</a>
</nav>
<header id="header">header</header>
<main id="main" style="height: 2000px;">
    main
</main>
<footer id="footer">footer</footer>

选中按钮返回顶部

smooth-scroll允许我们选中其他元素实现这个滚动的效果

我们添加一个按钮

<button id="btn" @click="back">back</button>

修改SmoothScroll选中，并且在页面使用 smooth-scroll 给我们提供的方法

let scroll = new SmoothScroll('a[href*="#"], btn[id="btn"]',{
    header: 'nav',
    speed: 1000,
    offset: 5,
    easing: 'easeInOutQuint'
})
export default {
    name: 'scroll',
    data() {
        return {
        }
    },
    methods: {
        back(){
            scroll.animateScroll(document.querySelector('#nav'))
        }
    }
}

scroll.animateScroll：

scroll 是我们定义的实例，在这里我定义到了组件内

animateScroll()三个参数

anchor, // Node to scroll to. ex. document.querySelector('#bazinga')
toggle, // Node that toggles the animation, OR an integer .ex.document.querySelector('#toggle')
options // Classes and callbacks. Same options as those passed into the init() function.

常用的是 anchor options 第一个参数也是一个选择器，选择需要跳转到的元素，他的第三个参数是一个对象，对象中也是滚动的配置，单独配置动画

跳转后观察地址栏，可以看到也是通过锚点实现的

当然你需要中断滚动动画的时候可以使用取消滚动

var scroll = new SmoothScroll();
scroll.cancelScroll();

在使用锚点时 发现一个问题，我们通过锚点跳转的时候路由也会改变，对页面正常使用影响不大，但还是找到了另一种方式解决

scrollIntoView

这个方法也非常简单scrollIntoView() 方法会滚动元素的父容器，使被调用 scrollIntoView() 的元素对用户可见。

我们给按钮绑定好点击事件，直接对想跳转到的元素使用scrollIntoView就可以

document.querySelector('#footer').scrollIntoView({behavior: "smooth"})

scrollIntoView（）两个参数

第一个参数是一个 布尔类型的值，第二个参数是一个 配置对象，想讲讲第二个参数三个可选属性

• behavior 定义动画过渡效果， "auto"或 "smooth" 之一。默认为 "auto"。
• block 定义垂直方向的对齐， "start", "center", "end", 或 "nearest"之一。默认为 "start"。
• inline 定义水平方向的对齐， "start", "center", "end", 或 "nearest"之一。默认为 "nearest"。

再来第一个参数：

• 如果为true，元素的顶端将和其所在滚动区的可视区域的顶端对齐。相应的 scrollIntoViewOptions: {block: "start", inline: "nearest"}。这是这个参数的默认值。
• 如果为false，元素的底端将和其所在滚动区的可视区域的底端对齐。相应的scrollIntoViewOptions: {block: "end", inline: "nearest"}。

我写的例子中只配置了 behavior 为 smooth 既平缓过渡