首页 > 代码库 > JS 回到顶部

JS 回到顶部

对于内容超出屏幕很多的内容,有个回到顶部的按钮还是很人性化的

 

HTML

<header></header><div></div><span id="go">回到顶部</span>

 

JS

var goTop =document.getElementById("go");    window.onscroll =function(){        var scrolltop = document.documentElement.scrollTop || document.body.scrollTop;        if(scrolltop >300){            goTop.style.display ="block";        }else{            goTop.style.display ="none";        }    }    goTop.onclick =function(){        // 第一种方法:直接改变滚动条的位置        // document.documentElement.scrollTop = document.body.scrollTop =0;        // 使用scrollTo方法,可把内容滚动到指定的坐标        var win =document.documentElement || document.body;        win.scrollTo(0,0);    }

 

CSS自定义。

知识点:

* scrollTop() 方法返回或设置匹配元素的滚动条的垂直位置。

* scrollTo() 方法可把内容滚动到指定的坐标。

 

JS 回到顶部