回到页面顶部

浏览网页时,向下滚动后.提供一个按钮,点击一下直接回到页面顶部.

实现的办法很多.可以锚点,判断滚动条位置等.

这个测试使用window.scrollY 和window.scrollTo()

当window.scrollY 为0 时,页面处于顶部.向下滚动后,这个值会增加

window.scrollTo()可设置这个值,如果设为0,页面将回到顶部

// 1.做个按钮 

// 固定在右侧中间靠下一点的位置.DOM上直接写scrollTo(0,0)方法

<a id="totopbtn" href="javascript:scrollTo(0,0)" style="position:fixed;right:20px;top:40%;display:none">↑回到顶部</a>

// 2.当滚动一定距离时,显示这个按钮

// 绑定滚动事件,判断scrollY 值超过150显示这个按钮

window.onscroll = function ()
{
    var btn = document.getElementById('totopbtn');
    btn.style.display = window.scrollY > 150 ? "block" : "none";
    //console.log('scrollY : ' + window.scrollY);
}