当用户浏览的网页过于长的时候,用户在浏览到网页底部想要在返回顶部需要滚动好几次滚轮才能返回顶部,不仅麻烦,而且用户体验也会很差。现在的大多是页面都会在页面顶部或者是页面的可见区域的某一位置固定一个按钮,点击它可以使页面返回顶部,用户再也不用滚动滚轮了。下面我总结了集中常用的返回顶部的效果:

方法一(最简单,代码量最少,但是效果有些生硬)、代码如下:

 <!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返回顶部效果的更多相关文章

  1. JQuery 实现返回顶部效果

    首先要里了解一下几个知识 $(window).scrollTop() ---滚动条距顶部距离 fadeIn() 方法使用淡入效果来显示被选元素,假如该元素是隐藏的. fadeOut() 方法使用淡出效 ...

  2. jq-animate实现返回顶部效果

    jq-animate实现返回顶部效果: <!doctype html> <html lang="en"> <head> <meta cha ...

  3. JavaScript实现返回顶部效果

    仿淘宝回到顶部效果 需求:当滚动条到一定位置时侧边栏固定在某个位置,再往下滑动到某一位置时显示回到顶部按钮.点击按钮后页面会动态滑到顶部,速度由快到慢向上滑. 思路: 1.页面加载完毕才能执行js代码 ...

  4. js返回顶部封装 简洁

    js返回顶部封装 简洁: 加入html页面body最后面即可. <script> a(); function a() { $(function() { if ($(".j-to- ...

  5. WEB返回顶部效果

    1. PC端页面返回顶部效果 1 $( window ).scroll(function(){ 2 if( $( window ).scrollTop() > 500 ){ // 当顶部的滚动距 ...

  6. 原生JS返回顶部,带返回效果

    有些网站当滑到一定高度时右下角会有一个按钮,你只要一点就可以直接返回顶部了.那这个功能是怎么做到的呢.其实不算太难: 首先我们先在网页中创建一个按钮,上面写上返回顶部,把它的样式改成固定定位,之后想要 ...

  7. 原生js返回顶部(匀速、由快到慢)

    在项目中我们经常有需求要求页面滚动到一定位置时出现返回顶部按钮,点击即返回顶部. 方法一: 锚点,这是最简单的.(a标签的href属性等于一直要到达位置元素的id值) 方法二: js直接给页面根节点设 ...

  8. HTML页面实现返回顶部效果 go to top

    1.首先导入jQuery插件. 2.js代码: $(window).scroll(function () { if($(window).scrollTop()>=100) { $(". ...

  9. 简约的返回顶部效果(jQuery)

    博客建好也快一个月了,主题是在原有主题的基础上做的修改,喜欢这样的清新简约风格,为了更好的体验,以后也会经常做修改. 一般博客的文章都比较长,看到下面不能快速返回到顶部还真是不方便,今天自己动手写了一 ...

随机推荐

  1. java中HttpServletRequest常用获取url、资源名等方法总结

    HttpServletRequest客户端获取请求,客户端通过HTTP协议访问服务器时,HTTP请求头中的所有信息都封装在这个对象中.所以我们能够从对象中获取相应信息   端口 request.get ...

  2. [MySQL] MySQL存储过程常用的函数

    一.字符串类 CHARSET(str) //返回字串字符集 CONCAT (string2  [,... ]) //连接字串 INSTR (string ,substring ) //返回substr ...

  3. tp5 model 的时间戳

    单独在模型里面设置:(推荐) protected $autoWriteTimestamp = true; // int 型 protected $autoWriteTimestamp = 'datet ...

  4. October 28th Week 44th Friday 2016

    Life is not a problem to be solved, but a reality to be experienced. 人生不是待解决的难题,而是等着我们去体验的现实. Press ...

  5. 分布式之ZookeeperMac安装

    Zookeeper用于分布式计算中的协调员,观察员,观察者,分布式锁,在系统中利用Zookeeper来处理事件通知,队列,锁等功能. 使用brew安装 zookeeper. 可参考:http://bl ...

  6. display:inline-block会产生空隙

    display:inline-block会产生空隙 解决方法:font-size:0;letter-spacing:-4px

  7. .net学习笔记---tcp/udp/http/socket

    什么是TCP和UDP,以及二者区别是什么? TCP的全称为传输控制协议.这种协议可以提供面向连接的.可靠的.点到点的通信. UDP全称为用户数据报协议,它可以提供非连接的不可靠的点到多点的通信. 使用 ...

  8. 【Java EE 学习 79 上】【mybatis 基本使用方法】

    一.简介 mybatis类似于hibernate,都是简化对数据库操作的框架,但是和hibernate不同的是,mybatis更加灵活,整体来说框架更小,这体现在它需要我们手写SQL语句,而hiber ...

  9. Linux系统GCC常用命令和GCC编译过程描述

    前言: GCC 原名为 GNU C 语言编译器(GNU C Compiler),因为它原本只能处理 C语言.GCC 很快地扩展,变得可处理 C++.后来又 扩展能够支持更多编程语言,如Fortran. ...

  10. Js实现string.format

    经常需要动态拼接html字符串,想到用类似于.net的string.format函数比较好,于是找了下,stackoverflow的代码: if (!String.prototype.format) ...