html页面刷新回到顶部_HTML5 回到顶部

图片：

html

回到顶部

css

margin: 0;

padding: 0;

}

.box {

width:1000px;

margin: 0 auto;

}

#btn {

width:40px;

height: 40px;

position:fixed;

left:50%;

bottom:30px;

background:url(../img/顶部.png) no-repeat left top ;

margin-left: 610px;

}

#btn:hover {

background:url(../img/顶部.png) no-repeat left -40px;

}

indow.onload = function () {

var topbtn = document.getElementById("btn");

var timer = null;

//获取屏幕的高度

var pagelookheight = document.documentElement.clientHeight;

window.onscroll = function(){

//滚动超出高度，显示按钮，否则隐藏

var backtop = document.body.scrollTop;

// 滚动超过一频应该显示

if(backtop >= pagelookheight){

topbtn.style.display = "block";

}

// 不显示

else{

topbtn.style.display = "none";

}

topbtn.onclick = function () {

timer = setInterval(function () {

var backtop = document.body.scrollTop;

//速度操作减速

var speedtop = backtop/5;

document.body.scrollTop = backtop -speedtop; //高度不断减少

if(backtop ==0){ //滑动到顶端

clearInterval(timer); //清除计时器

}

}, 30);

}

效果：

html页面刷新回到顶部_HTML5 回到顶部相关推荐

html页面刷新回到顶部_html回到页面顶部
js隐藏与显示回到顶部按钮现在大多数网站都会添加这种功能:当滚动条滚动到页面的下方时,页面的右下角会显示出来一个"回到顶部"的按钮或连接,点击该按钮后页面会跳转到顶部,或某一个适 ...
蒙文蒙古语翻译软件，实线蒙文翻译页面滚动回到蒙古语翻译顶部
uni-app 实现蒙文翻译页面滚动一定距离出现回到顶部按钮,点击回到蒙古语翻译顶部回到蒙文翻译顶部按钮html 蒙古语翻译软件体验地址: 安卓:http://tapp.51goods.vip/we ...
jq怎么回到顶部和回到尾部_回到学校系列为孩子们提供开放资源
jq怎么回到顶部和回到尾部全球各地的孩子们都回到学校了! 有没有比免费和开放的教育资源和工具更好的帮助他们成长并充分利用学校的方法? Opensource.com将于9月8日至19日举办为期两周的开 ...
html锚点链接回到顶部,回到顶部和回到底部特效-jquery锚点移动兼容所有浏览器...
插件描述:回到顶部和回到底部特效-jquery锚点移动兼容所有浏览器回到顶部和回到底部在当前的网页中应用时相当广泛的为了更好的体验,我们在回到顶部或回到底部的过程中采用一个渐进的滚动那么我们就要 ...
基础知识：页面div始终浮在浏览器顶部
页面div始终浮在浏览器顶部 <html> <head><meta charset="utf-8"/><title>test< ...
java局部刷新session过期_Ajax局部页面刷新和History API结合的陷阱
ajax在现代网站已经得到非常普遍地应用,主要的好处大家都知道(异步加载数据,不用刷新整个浏览器,更小的数据传输尺寸).对于那些老网站或者老项目来说全盘改造成ajax并不现实,于是就有了"局 ...
【Android】Listview返回顶部，快速返回顶部的功能实现，详解代码。
2019独角兽企业重金招聘Python工程师标准>>> 作者:程序员小冰,GitHub主页:https://github.com/QQ986945193 新浪微博:http://we ...
Vuex页面刷新数据丢失的问题
为什么说刷新页面vuex的数据会丢失刷新页面vuex的数据会丢失属于正常现象,(vuex的数据并不是弄丢了,而是初始化了,回到初始值,回到原点了).因为JS的数据都是保存在浏览器的堆栈内存里面的,刷 ...
网站输入正确账号密码页面刷新一下_淘宝开店卖家如何正确发布宝贝？先学会这3个技巧，不要再迷茫了...
>>阅读前,请点击右上角[关注]口袋电商课,让你少走一年弯路! 当自己店铺的产品较少,发布宝贝显得很简单.但当自己的店铺单品很多时,这项工作就显得繁琐,光是产品的主图和详情页就够让人头大, ...

html页面刷新回到顶部_HTML5 回到顶部

html页面刷新回到顶部_HTML5 回到顶部相关推荐

最新文章

热门文章