javascript实现回到顶部特效

   当页面特别长的时候,用户想回到页面顶部,必须得滚动好几次滚动键才能回到顶部,如果在页面右下角有个“返回顶部”的按钮,用户点击一下,就可以回到顶部,对于用户来说,是一个比较好的体验。

  HTML:

  ?

1

<input id="btn1" type="button" value="回到顶部" />

  CSS:

  ?

1

#btn1{position:fixed;bottom:10px;right:10px;}

  JS:

  ?

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

window.onload=funcition(){
var oBtn=document.getElementById("btn");
var timer=null;
//申明一个变量看是否为系统还是用户滚动
var sBys=true;
window.onscroll=funcition(){
if(!sBys){
clearInterval(timer);
}
sBys=false;
}
oBtn.onclick=funcition(){
timer = setInterval(funcition(){
//获取scrollTop
var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;
//当点击按钮回到顶部时计算缓冲速度
var ispeed=Math.floor(-scrollTop/8);
if(scrollTop==0){
clearInterval(timer)
}
sBys=true;
document.documentElement.scrollTop=document.body.scrollTop=scrollTop+ispeed;
},30)
}
}

  知识点:

  1.计算速度(缓冲)向下取整

  2.当scrollTop==0时需要清除定时器

  3.需要判断是用户还是js操作滚动条,如果是用户操作就清除定时器

  以上所述就是本文的全部内容了,希望大家能够喜欢。

时间: 2024-12-31 12:42:13

javascript实现回到顶部特效的相关文章

javascript实现回到顶部特效_javascript技巧

HTML: <input id="btn1" type="button" value="回到顶部" /> CSS: #btn1{position:fixed;bottom:10px;right:10px;} JS: window.onload=funcition(){ var oBtn=document.getElementById("btn"); var timer=null; //申明一个变量看是否为系统还是用

javascript回到顶部特效_javascript技巧

本文实例为大家分享了javascript回到顶部效果,供大家参考,具体内容如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1"> <title>回到顶部效果

jquery实现的动态回到顶部特效代码_jquery

本文实例讲述了jquery实现的动态回到顶部特效代码.分享给大家供大家参考,具体如下: 这款jquery动态回到顶部特效,不是一下子就回到了网页顶部,而是带点缓冲的效果,有动画效果,使用了jQuery插件,这是个非常常用的网页特效,希望大家喜欢哦. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-back-top-dh-style-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DT

jQuery实现分章节锚点“回到顶部”动画特效代码_jquery

本文实例讲述了jQuery实现分章节锚点"回到顶部"动画特效.分享给大家供大家参考,具体如下: 这里演示基于jquery实现的分章节动画实现"回到顶部"的效果,可通过 网页顶部的数字序号直接进入网页的章节,当处于第二章节的时候,网页右侧会显示竖排的控制按钮,点击按钮会回到相应章节,其实也就是定义好的锚点,当然也可回到顶部,网页上见到的回顶部大多不是这个样子,所以本款效果还挺新颖. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js

javascript 回到顶部效果的实现代码

 本篇文章主要是对javascript 回到顶部效果的实现代码进行了介绍,需要的朋友可以过来参考下,希望对大家有所帮助  代码如下: //speed 滚动速度 time 时间间隔 function gotoTop(speed,time){       speed = speed || 0.1;     time = time || 16;       // 滚动条到页面顶部的水平距离     var x = document.body.scrollLeft;       // 滚动条到页面顶部的

jQuery实现带有动画效果的回到顶部和底部代码_jquery

本文实例讲述了jQuery实现带有动画效果的回到顶部和底部代码.分享给大家供大家参考,具体如下: 这款动画版的回到顶部和底部效果代码,也算是比较常见的一款网页特效了,像淘宝网就有这种效果,使用了jQuery插件,加入了动画效果. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-animate-style-scroll-top-buttom-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C

收藏了三jQuery返回顶部特效代码

 代码如下 复制代码 <title>jQuery返回顶部特效 </title> </head> <body> <style type="text/css"> /*返回顶部*/ #roll_top {position:relative; margin-bottom:1px;cursor:pointer;height:60px;width:60px;display:block;background:#ddd;} #roll_top

JS采用绝对定位实现回到顶部效果完整实例_javascript技巧

本文实例讲述了JS采用绝对定位实现回到顶部效果.分享给大家供大家参考,具体如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" <html xmlns="http://www.w3.org/1999/xhtml"> <head&g

最好的回到顶部插件gotoTop.js实例demo

直接上代码:http://download.csdn.net/detail/cometwo/9388435 <!DOCTYPE html> <html> <head> <script type="text/javascript" src="jquery-1.11.1.min.js"></script> <script type="text/javascript" src="