js实现回到顶部,以及回到指点div顶部

1. 是用锚点回到页面顶部

利用a标签链接实现回到顶部

<body style="height:2000px;">
<div id="top"></div>
<a href="#top" style="position:fixed;left:0;bottom:0">我要回到顶部</a>
</body>

2. 使用scrollTop或者scrollTo()方法

<body style="height:2000px;">
<button id="test" style="position:fixed;left:0;bottom:0">我要回到顶部</button>
<script>
test.onclick = function(){
document.body.scrollTop = document.documentElement.scrollTop = 0;
// 或者scrollTo(0,0);
}
</script>
</body>

3. 回到指点div顶部

实现回到指点div顶部,要先设置overflow,要在实现overflow的该元素下使用scrollTop=0即可

<body>
<style>
    .haha{
        width: 10px;
        height: 200px;
        overflow: auto;
    }
</style>
    <div id="flag" class="haha">
        <p>
            11
            11
            1
            1
            1
            1
            1
            1
            1
            1
            1
            1
            1
            1
            1
            1
            1
            1
            1
            1
            1
            1
            1
            1
            1
			1
			11
			1
			1
			11
			1
			1
			1
        </p>
    </div>
    <button onclick="document.getElementById('flag').scrollTop=0;" class="joinbtn">我要回到顶部</button>
</body>

使用锚点去到指点的位置

1.使用scrollIntoView方法进行定位到某一位置

// 如果为true,元素的顶端将和其所在滚动区的可视区域的顶端对齐。
// 如果为false,元素的底端将和其所在滚动区的可视区域的底端对齐。
document.querySelector('#需要定位的ID').scrollIntoView(true)
// 或
this.$refs.form.scrollIntoView({
                    behavior: "smooth",
})
//document.querySelector('#需要定位的ID') 可以使用vue的ref
//scrollIntoView参数可以是一个对象
{
  behavior: "smooth", // 定义动画过渡效果, "auto"或 "smooth" 之一。默认为 "auto"
  block: "center", // 定义垂直方向的对齐, "start", "center", "end", 或 "nearest"之一。默认为 "start"
  inline: "nearest" // 定义水平方向的对齐, "start", "center", "end", 或 "nearest"之一。默认为 "nearest"
}

  1. 使用a标签实现,锚点定位
<a href="#maodian">跳至id为maodian的位置</a>

<div id= "maodian"></div>


获取使用方法
window.location.href = "#maodian" // 跳至id为maodian的位置

你可能感兴趣的:(基础,html,js,javascript,html5,html)