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）
博客建好也快一个月了,主题是在原有主题的基础上做的修改,喜欢这样的清新简约风格,为了更好的体验,以后也会经常做修改. 一般博客的文章都比较长,看到下面不能快速返回到顶部还真是不方便,今天自己动手写了一 ...
随机推荐
- 面向对象Part2
`变量: 成员变量:又叫全局变量,定义在类中,方法外面. 1).类成员变量. 使用Static 2).实例成员变量. 没有使用Static. 局部变量:出了成员变量,其他的都是局部变量. 1). ...
- 图片根据需要突出div
1.当代码为: <!DOCTYPE html> <html lang="en"> <head> <meta charset="U ...
- LeetCode 299 Bulls and Cows
Problem: You are playing the following Bulls and Cows game with your friend: You write down a number ...
- xcode 8 重新支持插件
苹果出了Xcode8之后,就加了签名让之前的自定义插件无法继续的安装使用.想要重新使用插件的话只要用自己的签名覆盖苹果的签名即可. 1.创建自签名证书 钥匙串->钥匙串访问->证书助理-& ...
- Linux下文件的三种时间戳
Linux下文件的三种时间标记 三种时间对应关系表 column column column 访问时间 Access atime 修改时间 Modify mtime 状态改动时间 Change cti ...
- 【转】Caffe初试（八）Blob，Layer和Net以及对应配置文件的编写
深度网络(net)是一个组合模型,它由许多相互连接的层(layers)组合而成.Caffe就是组建深度网络的这样一种工具,它按照一定的策略,一层一层的搭建出自己的模型.它将所有的信息数据定义为blob ...
- java垃圾回收机制
1 .垃圾回收机制(GC)垃圾回收就是回收内存中不再使用对象:(1)垃圾回收的步骤:1)查找内存中不再使用的对象:2)释放这些对象所占用的内存:(2)查找内存中不再使用的对象方法:1)引用计数法如果一 ...
- 关于java中多态的理解
java三大特性:封装,继承,多态. 多态是java的非常重要的一个特性: 那么问题来了:什么是多态呢? 定义:指允许不同类的对象对同一消息做出响应.即同一消息可以根据发送对象的不同而采用多种不同的行 ...
- Mahout推荐算法API详解
转载自:http://blog.fens.me/mahout-recommendation-api/ Hadoop家族系列文章,主要介绍Hadoop家族产品,常用的项目包括Hadoop, Hive, ...
- 纯css实现二级导航菜单效果,通过简单的鼠标事件操作页面元素样式变换实现二级导航菜单的功能,非常简单实用,
HTML代码如下 <!-- 头部导航栏开始--><div id="nav"><dl class="sy"><dt> ...