JS实现回到Top(顶部)--JavaScrip
来源:互联网 发布:淘宝卖自己做的食品 编辑:程序博客网 时间:2024/06/07 14:25
当我们浏览一段很长的网页时,已经看到底部了,想回到顶部看前面的内容,可是需要滚动好几转鼠标滑轮或者拉动滚动条走好长“一段路”。这对于用户来说,体验效果是不够好的。如果我们借助简单的一个按钮,点击一下就能回到顶部,这会让用户省很多事,用户体验效果就非常好了。
注意编写程序代码时要解决如下问题:
1、这个按钮如何布局
2、JS如何解决点击按钮回到Top,且回到Top的用户体验最好
3、按钮在怎样的情况下显示
如果你没有思路,不用担心,看完代码实现后,你就明白了
1、案例主要的代码
demo.html:
<a href="javascript:" style="display: none" class="btn" title="回到顶端">
<img src="images/GoTopColor.png"/>
</a>
comm.css:
*{margin: 0;padding: 0;}
div img{width: 100%;/*display: block*/}
.btn{
width: 50px;
height: 60px;
position: fixed;
bottom: 30px;
right: 5px;
}
.btn img{width: 100%;height: 100%;}
.btn:hover{
background-color: black;
}
comm.js:
/**
* Created by NIUXINLONG on 2017/9/3.
*/
window.onload = function () {
var topbtn = document.getElementById("btn");
var timer = null;
var screenHeight = document.documentElement.clientHeight;
window.onscroll = function () {
var backtop = document.body.scrollTop;
if(backtop >=screenHeight){
topbtn.style.display = "block";
}
else {
topbtn.style.display = "none";
}
};
topbtn.onclick = function () {
timer = setInterval(function () {
var backtop = document.body.scrollTop;
var speed = backtop/5;
document.body.scrollTop = backtop-speed;
if(backtop == 0){
clearInterval(timer);
}
},60);
}
};
2、案例效果图
案例源文件:GoTOP.zip
本文系作者原创,转载请注明出处,感谢合作!
阅读全文
0 0
- JS实现回到Top(顶部)--JavaScrip
- js+css实现回到顶部按钮(back to top)
- Back Top ①(回到顶部)原生JS实现
- JS动态实现:每个h2后添加top回到顶部
- js实现回到顶部
- js 回到顶部的实现
- JS实现回到顶部按钮
- js实现回到顶部效果
- JS实现回到顶部效果
- back to top 回到顶部按钮 css+js
- 百分百纯js实现回到顶部按钮
- js实现 回到网页顶部 效果
- 使用js实现回到页面顶部
- 源生JS实现回到顶部--缓冲效果
- JS平滑效果实现回到顶部
- JS回到顶部按钮实现源代码
- js 回到顶部
- JS 回到顶部
- 大灰狼玩Scala--简介---(1)
- poj 1463 Strategic game 树形dp
- VMware12 + CentOS7 安装
- 精彩博客
- 鼠标滑上选择文本
- JS实现回到Top(顶部)--JavaScrip
- 在Ubuntu中安装Python3以及安装pip3
- matlab2c使用c++实现matlab函数系列教程-intersect函数
- 软件测试学习3-检查产品说明书
- 起点
- 网络取证二
- ThreadPoolExecutor详解
- c++ 内联函数与宏(讲的很好~)
- Bagging与随机森林