2.跳转到指定的位置

跳转到指定的位置

具体的效果

1. 效果1
   
2. 效果2
   
   查看相关效果

具体实现

方法一：scrollIntoView

跳转到指定的盒子

var element = document.getElementById("box");

element.scrollIntoView();
element.scrollIntoView(false);
element.scrollIntoView({block: "end"});
element.scrollIntoView({behavior: "smooth", block: "end", inline: "nearest"});

详细说明

缺点

无法跳转到指定的像素位置
当顶部菜单栏是浮动定位，跳转到指定的盒子顶部的时候，菜单会浮于盒子上面，压住盒子的内容

正确的效果

scrollIntoView实现的效果

可以将盒子内的内容距离盒子顶部距离 > 菜单栏的高度，这样盒子的内容正常显示

方法二

window.scrollTo({
    top: 指定的高度,
    behavior: "smooth",
});

当上面无效的时候，使用下面的

this.$nextTick(() => {
document.body.scrollTo（x, y） 

});

缺点

IE不兼容、滚动条距离会继承
会出现如图效果

方法三

scrollBy

  var element = document.getElementById(id).offsetTop
  window.scrollBy(0, element);

缺点：无法设置平滑跳转

方法四

原生js点击平滑滚动到某个元素

function toHeight(id) {
    var timer = null
    var element = document.getElementById(id).offsetTop
    var pageTop = document.documentElement
    timer = setInterval(function () {
      if (pageTop.scrollTop >= element) {
        clearInterval(timer)
        pageTop.scrollTop = element
      } else {
        pageTop.scrollTop += 10;
      }
    }, 20);
  }