跳转到指定的位置
具体的效果
- 效果1
- 效果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);
}