JS实现回到Top(顶部)--JavaScript
当我们浏览一段很长的网页时,已经看到底部了,想回到顶部看前面的内容,可是需要滚动好几转鼠标滑轮或者拉动滚动条走好长“一段路”。这对于用户来说,体验效果是不够好的。如果我们借助简单的一个按钮,点击一下就能回到顶部,这会让用户省很多事,用户体验效果就非常好了。
注意编写程序代码时要解决如下问题:
1、这个按钮如何布局
2、JS如何解决点击按钮回到Top,且回到Top的用户体验最好
3、按钮在怎样的情况下显示
如果你没有思路,不用担心,看完代码实现后,你就明白了
1、案例主要的代码
demo.html:
<a href="javascript:" style="display: none" class="btn" id="btn" title="回到顶端">
<img src="data: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
本文系作者原创,转载请注明出处,感谢合作!
JS实现回到Top(顶部)--JavaScript的更多相关文章
- 基于JS实现回到页面顶部的五种写法(从实现到增强)
这篇文章主要介绍了基于JS实现回到页面顶部的五种写法(从实现到增强)的相关资料,本文介绍的非常详细,实用性也非常高,非常具有参考借鉴价值,需要的朋友可以参考下 写法 [1]锚点 使用锚点链接是一种 ...
- JS实现回到页面顶部动画效果 2016.03.23
最近在模仿各大网站写页面样式和交互,发现好多都有回到顶部的需要,所以写了一下js,记录下来. 发现还可以添加从快到慢的动画效果和随时下拉滚动条停止滚动的功能, 参考了imooc上相关课程,最终实现JS ...
- JS实现回到顶部效果
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- js实现回到顶部功能
js实现回到顶部功能 一.总结 一句话总结: 可以通过js或者jquery可以很快的控制页面的属性,比如高度等等 //设置当前视口的顶端数值 var setScrollTop = function(t ...
- 页面滚动事件和利用JS实现回到顶部效果
页面滚动 事件:window.onscroll, 获得页面滚动位置:document.body.scrollTop: HTML代码: 这里注意此处逻辑,大于500就显示,否则就隐藏,还有注意如果变量名 ...
- js原生回到顶部
<!DOCTYPE html><html><head> <meta content="测试demo" name="Keyword ...
- js+JQuery实现返回顶部功能
很多网站上都有返回顶部的效果,本文阐述如何使用jquery实现返回顶部按钮. 首先需要在顶部添加如下html元素: <p id="back-to-top"><a ...
- js常用返回网页顶部几种方法
一.使用锚标记 此方法最简单,只需在body下放个隐藏的锚点标记,内容如下: 代码如下 复制代码 <a name="top" id="top">& ...
- js平滑滚动到顶部,底部,指定地方
[原文链接] 采用锚点进行页面中的跳转的确很方便,但是要想增加网页的效果,可以使用jquery中的animate,实现滚动的一个动作,慢慢的滚动到你想跳转到的位置,从而看起来会非常高大上. [示例演示 ...
随机推荐
- 《第一行代码 android》 读书笔记:找出当前界面对应的Activity
在android开发中找出当前界面对应的Activity,步骤如下: 新建一个BaseActivity继承自Activity,然后在BaseActivity中重写onCreate()方法,通过getC ...
- CSS3 @keyframes 用法(简单动画实现)
定义: 通过 @keyframes 规则,能够创建动画. 创建动画的原理是,将一套 CSS 样式逐渐变化为另一套样式. 在动画过程中,可以多次改变这套 CSS 样式. 以百分比来规定改变发生的时间,或 ...
- 搭建SS服务器
体验: http://ss.ishadowx.com/ centos7 安装shadowsocks客户端 http://blog.csdn.net/guyan0319/article/details/ ...
- Oracle创建表时Storage参数具体含义
本文通过图表和实例的阐述在Oracle数据库创建新表时Storage的参数具体含义. 可用于:表空间.回滚段.表.索引.分区.快照.快照日志 参数名称 缺省值 最小值 最大值 说明 INITIAL 5 ...
- mysql window版本下载
最小的版本:https://cdn.mysql.com//Downloads/MySQL-5.5/mysql-5.5.54-win32.msi
- 麻省理工18年春软件构造课程阅读02“Java基础”
本文内容来自MIT_6.031_sp18: Software Construction课程的Readings部分,采用CC BY-SA 4.0协议. 由于我们学校(哈工大)大二软件构造课程的大部分素材 ...
- Java中子类能继承父类的私有属性吗?
前段时间去听老师讲课的时候,老师告诉我子类是可以继承父类所有的属性和方法的.当时我是极其疑惑的,因为之前学校考试时这个考点我记得很清楚:子类只能继承父类的非私有属性和方法.老师给我的解释是这样的--先 ...
- web工程导入新环境的注意事项
问题一:The type java.lang.Object cannot be resolved. 解决办法: 当你在Eclipse引用不同版本JDK工程时会发生该问题.由于你开发环境中应用了多个版本 ...
- linux 邮件服务器
邮件通信系统协议及概念:软件角色:MUA:邮件客户端MTA:邮件服务端MDA:邮件服务端模块邮件客户端:Mail User Agent,邮件用户代理邮件服务端:Mail Transfer Agent, ...
- 给VMware的虚拟机设置静态地址
最近在VMware 上运行新版本Linux 虚拟机集群,在给每个虚拟机设置静态IP时,遇到一些挫折,新版本有些变动,故记录下来备用. Centos版本信息7.4.1708: Ubuntu版本信息17. ...