js返回顶部效果
当用户浏览的网页过于长的时候，用户在浏览到网页底部想要在返回顶部需要滚动好几次滚轮才能返回顶部，不仅麻烦，而且用户体验也会很差。现在的大多是页面都会在页面顶部或者是页面的可见区域的某一位置固定一个按钮，点击它可以使页面返回顶部，用户再也不用滚动滚轮了。下面我总结了集中常用的返回顶部的效果：
方法一（最简单，代码量最少，但是效果有些生硬）、代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>返回顶部</title>
<style>
#btn{width: 50px;height: 50px;background: gray;}
</style>
</head>
<body>
<div id="box">
<p>111111111111111111</p>
<p>111111111111111111</p>
<p>111111111111111111</p>
<p>111111111111111111</p>
<p>111111111111111111</p>
<p>111111111111111111</p>
<p>111111111111111111</p>
<p>111111111111111111</p>
<p>111111111111111111</p>
<p>111111111111111111</p>
<p>111111111111111111</p>
<p>111111111111111111</p>
<p>111111111111111111</p>
<p>111111111111111111</p>
<p>111111111111111111</p>
<p>111111111111111111</p>
<p>111111111111111111</p>
<p>111111111111111111</p>
<p>111111111111111111</p>
<p>111111111111111111</p>
<p>111111111111111111</p>
<p>111111111111111111</p>
<p>111111111111111111</p>
<p>111111111111111111</p>
<p>111111111111111111</p>
<p>111111111111111111</p>
<p>111111111111111111</p>
<p>111111111111111111</p>
<p>111111111111111111</p>
<p>111111111111111111</p>
<p>111111111111111111</p>
<p>111111111111111111</p>
<p>111111111111111111</p>
<p>111111111111111111</p>
<p>111111111111111111</p>
<p>111111111111111111</p>
<p>111111111111111111</p>
<p>111111111111111111</p>
<p>111111111111111111</p>
<p>111111111111111111</p>
<p>111111111111111111</p>
<p>111111111111111111</p>
<p>111111111111111111</p>
<p>111111111111111111</p>
<p>111111111111111111</p>
<p>111111111111111111</p>
<p>111111111111111111</p>
<p>111111111111111111</p>
<p>111111111111111111</p>
<p>111111111111111111</p>
<p>111111111111111111</p>
<p>111111111111111111</p>
<p>111111111111111111</p>
<p>111111111111111111</p>
<p>111111111111111111</p>
<p>111111111111111111</p>
<p>111111111111111111</p>
<p>111111111111111111</p>
<p>111111111111111111</p>
<p>111111111111111111</p>
<p>111111111111111111</p>
<p>111111111111111111</p>
<p>111111111111111111</p>
<p>111111111111111111</p>
<p>111111111111111111</p>
<p>111111111111111111</p>
<p>111111111111111111</p>
<p>111111111111111111</p>
<p>111111111111111111</p>
<p>111111111111111111</p>
<p>111111111111111111</p>
<p>111111111111111111</p>
<p>111111111111111111</p>
</div>
<button id="btn">返回顶部</button>
</body>
<script>
var btn = document.getElementById('btn');
btn.onclick = function(){
91 window.scrollTo(0,0);// 在窗体中如果有滚动条，将横向滚动条移动到相对于窗体宽度为x个像素的位置，将纵向滚动条移动到相对于窗体高度为y个像素的位置(如果没有滚动条，页面不会发生任何变化)
92 }
</script>
</html>
方法二：代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>返回顶部</title>
<style>
#btn{width: 50px;height: 50px;background: gray;}
</style>
</head>
<body>
<div id="box">
<p>111111111111111111</p>
<p>111111111111111111</p>
<p>111111111111111111</p>
<p>111111111111111111</p>
<p>111111111111111111</p>
<p>111111111111111111</p>
<p>111111111111111111</p>
<p>111111111111111111</p>
<p>111111111111111111</p>
<p>111111111111111111</p>
<p>111111111111111111</p>
<p>111111111111111111</p>
<p>111111111111111111</p>
<p>111111111111111111</p>
<p>111111111111111111</p>
<p>111111111111111111</p>
<p>111111111111111111</p>
<p>111111111111111111</p>
<p>111111111111111111</p>
<p>111111111111111111</p>
<p>111111111111111111</p>
<p>111111111111111111</p>
<p>111111111111111111</p>
<p>111111111111111111</p>
<p>111111111111111111</p>
<p>111111111111111111</p>
<p>111111111111111111</p>
<p>111111111111111111</p>
<p>111111111111111111</p>
<p>111111111111111111</p>
<p>111111111111111111</p>
<p>111111111111111111</p>
<p>111111111111111111</p>
<p>111111111111111111</p>
<p>111111111111111111</p>
<p>111111111111111111</p>
<p>111111111111111111</p>
<p>111111111111111111</p>
<p>111111111111111111</p>
<p>111111111111111111</p>
<p>111111111111111111</p>
<p>111111111111111111</p>
<p>111111111111111111</p>
<p>111111111111111111</p>
<p>111111111111111111</p>
<p>111111111111111111</p>
<p>111111111111111111</p>
<p>111111111111111111</p>
<p>111111111111111111</p>
<p>111111111111111111</p>
<p>111111111111111111</p>
<p>111111111111111111</p>
<p>111111111111111111</p>
<p>111111111111111111</p>
<p>111111111111111111</p>
<p>111111111111111111</p>
<p>111111111111111111</p>
<p>111111111111111111</p>
<p>111111111111111111</p>
<p>111111111111111111</p>
<p>111111111111111111</p>
<p>111111111111111111</p>
<p>111111111111111111</p>
<p>111111111111111111</p>
<p>111111111111111111</p>
<p>111111111111111111</p>
<p>111111111111111111</p>
<p>111111111111111111</p>
<p>111111111111111111</p>
<p>111111111111111111</p>
<p>111111111111111111</p>
<p>111111111111111111</p>
<p>111111111111111111</p>
</div>
<button id="btn">返回顶部</button>
</body>
<script>
var btn = document.getElementById('btn');
var scrollTop ;
var timer = null;
window.onscroll = function(){
scrollTop = document.documentElement.scrollTop||document.body.scrollTop;//兼容性写法，并且在滚动事件内可以实时获得滚动条距顶部的距离
//console.log(scrollTop)
return scrollTop;
}
btn.onclick = function(){
clearInterval(timer);
// var now = scrollTop;
// var speed = (0-now)/10;
// speed = speed>0?Math.ceil(speed):Math.floor(speed);
timer = setInterval(function(){
var now = scrollTop;
var speed = (0-now)/10;
speed = speed>0?Math.ceil(speed):Math.floor(speed);//这三步设置是定时器里面可以使速度动态变化，达到有缓冲的效果，如果房子定时器外面的话，返回顶部的速度是匀速的。 if(scrollTop==0){
clearInterval(timer);
}
document.documentElement.scrollTop = scrollTop + speed;
document.body.scrollTop = scrollTop + speed; },30) }
</script>
</html>
方法三（利用jQuery，代码量少，而且带有动画效果）：代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>返回顶部</title>
<script src="jquery-1.4.min.js"></script>
<style>
#btn{width: 50px;height: 50px;background: gray;}
</style>
</head>
<body>
<div id="box">
<p>111111111111111111</p>
<p>111111111111111111</p>
<p>111111111111111111</p>
<p>111111111111111111</p>
<p>111111111111111111</p>
<p>111111111111111111</p>
<p>111111111111111111</p>
<p>111111111111111111</p>
<p>111111111111111111</p>
<p>111111111111111111</p>
<p>111111111111111111</p>
<p>111111111111111111</p>
<p>111111111111111111</p>
<p>111111111111111111</p>
<p>111111111111111111</p>
<p>111111111111111111</p>
<p>111111111111111111</p>
<p>111111111111111111</p>
<p>111111111111111111</p>
<p>111111111111111111</p>
<p>111111111111111111</p>
<p>111111111111111111</p>
<p>111111111111111111</p>
<p>111111111111111111</p>
<p>111111111111111111</p>
<p>111111111111111111</p>
<p>111111111111111111</p>
<p>111111111111111111</p>
<p>111111111111111111</p>
<p>111111111111111111</p>
<p>111111111111111111</p>
<p>111111111111111111</p>
<p>111111111111111111</p>
<p>111111111111111111</p>
<p>111111111111111111</p>
<p>111111111111111111</p>
<p>111111111111111111</p>
<p>111111111111111111</p>
<p>111111111111111111</p>
<p>111111111111111111</p>
<p>111111111111111111</p>
<p>111111111111111111</p>
<p>111111111111111111</p>
<p>111111111111111111</p>
<p>111111111111111111</p>
<p>111111111111111111</p>
<p>111111111111111111</p>
<p>111111111111111111</p>
<p>111111111111111111</p>
<p>111111111111111111</p>
<p>111111111111111111</p>
<p>111111111111111111</p>
<p>111111111111111111</p>
<p>111111111111111111</p>
<p>111111111111111111</p>
<p>111111111111111111</p>
<p>111111111111111111</p>
<p>111111111111111111</p>
<p>111111111111111111</p>
<p>111111111111111111</p>
<p>111111111111111111</p>
<p>111111111111111111</p>
<p>111111111111111111</p>
<p>111111111111111111</p>
<p>111111111111111111</p>
<p>111111111111111111</p>
<p>111111111111111111</p>
<p>111111111111111111</p>
<p>111111111111111111</p>
<p>111111111111111111</p>
<p>111111111111111111</p>
<p>111111111111111111</p>
<p>111111111111111111</p>
</div>
<button id="btn">返回顶部</button>
</body>
<script>
var btn = document.getElementById('btn');
// var scrollTop = document.documentElement.scrollTop||document.body.scrollTop;//兼容性写法，并且在滚动事件内可以实时获得滚动条距顶部的距离 ; btn.onclick = function(){ $('body,html').animate({scrollTop:0},300) }
</script>
</html>
以上总结若有错误，欢迎指正！
js返回顶部效果的更多相关文章
- JQuery 实现返回顶部效果
首先要里了解一下几个知识 $(window).scrollTop() ---滚动条距顶部距离 fadeIn() 方法使用淡入效果来显示被选元素,假如该元素是隐藏的. fadeOut() 方法使用淡出效 ...
- jq-animate实现返回顶部效果
jq-animate实现返回顶部效果: <!doctype html> <html lang="en"> <head> <meta cha ...
- JavaScript实现返回顶部效果
仿淘宝回到顶部效果 需求:当滚动条到一定位置时侧边栏固定在某个位置,再往下滑动到某一位置时显示回到顶部按钮.点击按钮后页面会动态滑到顶部,速度由快到慢向上滑. 思路: 1.页面加载完毕才能执行js代码 ...
- js返回顶部封装 简洁
js返回顶部封装 简洁: 加入html页面body最后面即可. <script> a(); function a() { $(function() { if ($(".j-to- ...
- WEB返回顶部效果
1. PC端页面返回顶部效果 1 $( window ).scroll(function(){ 2 if( $( window ).scrollTop() > 500 ){ // 当顶部的滚动距 ...
- 原生JS返回顶部，带返回效果
有些网站当滑到一定高度时右下角会有一个按钮,你只要一点就可以直接返回顶部了.那这个功能是怎么做到的呢.其实不算太难: 首先我们先在网页中创建一个按钮,上面写上返回顶部,把它的样式改成固定定位,之后想要 ...
- 原生js返回顶部（匀速、由快到慢）
在项目中我们经常有需求要求页面滚动到一定位置时出现返回顶部按钮,点击即返回顶部. 方法一: 锚点,这是最简单的.(a标签的href属性等于一直要到达位置元素的id值) 方法二: js直接给页面根节点设 ...
- HTML页面实现返回顶部效果 go to top
1.首先导入jQuery插件. 2.js代码: $(window).scroll(function () { if($(window).scrollTop()>=100) { $(". ...
- 简约的返回顶部效果（jQuery）
博客建好也快一个月了,主题是在原有主题的基础上做的修改,喜欢这样的清新简约风格,为了更好的体验,以后也会经常做修改. 一般博客的文章都比较长,看到下面不能快速返回到顶部还真是不方便,今天自己动手写了一 ...
随机推荐
- [转]python 常用类库！
Python学习 On this page... (hide) 1. 基本安装 2. Python文档 2.1 推荐资源站点 2.2 其他参考资料 2.3 代码示例 3. 常用工具 3.1 Pytho ...
- mongodb 数据库查询
- win10 安装framework3.5
win+x 点击命令提示符(个管理员) 输入dism.exe /online /enable-feature /featurename:NetFX3 /Source:H:\sources\sxs(解压 ...
- [Sass]扩展/继承
[Sass]扩展/继承 继承对于了解 CSS 的同学来说一点都不陌生,先来看一张图: 图中代码显示".col-sub .block li,.col-extra .block li" ...
- 关于settimeout 和for循环
for(var i=0;i<3;i++){ setTimeOut(function(){ console.log(i) },500) }; 执行结果:3,3,3 ---------------- ...
- JS获取浏览器窗口大小 获取屏幕，浏览器，网页高度宽度
网页可见区域宽:document.body.clientWidth 网页可见区域高:document.body.clientHeight 网页可见区域宽:document.body.offsetWid ...
- 采用cocos2d－x lua 制作数字滚动效果样例
require "Cocos2d"require "Cocos2dConstants"local testscene = class("testsce ...
- superSlider实现美女轮播图
superSlider实现美女轮播图 <!DOCTYPE html><html lang="en"><head><meta charset ...
- 各种webservice调用地址
http://www.webxml.com.cn/zh_cn/web_services.aspx
- pkcs1与pkcs8格式RSA私钥互相转换
转自:http://blog.csdn.net/duan19056/article/details/52104966 1.PKCS1私钥生成 openssl genrsa -out private.k ...