JS实现一键回顶功能示例代码


Posted in Javascript onOctober 28, 2013

1.基础准备:

scrollTop() 方法返回或设置匹配元素的滚动条的垂直位置。

scroll top offset 指的是滚动条相对于其顶部的偏移。

如果该方法未设置参数,则返回以像素计的相对滚动条顶部的偏移。

语法

$(selector).scrollTop(offset)

2.

toggleClass() 对设置或移除被选元素的一个或多个类进行切换。

例如对设置和移除所有 <p> 元素的 "main" 类进行切换:

$("button").click(function(){ 
$("p").toggleClass("main"); 
});

3.

setInterval() 方法可按照指定的周期(以毫秒计)来调用函数或计算表达式。

setInterval() 方法会不停地调用函数,直到 clearInterval() 被调用或窗口被关闭。由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的参数。

4.

scrollTo() 方法可把内容滚动到指定的坐标。

scrollTo(xpos,ypos)

参数 描述
xpos 必需。要在窗口文档显示区左上角显示的文档的 x 坐标。
ypos 必需。要在窗口文档显示区左上角显示的文档的 y 坐标。

由此的一段实现一键向上的代码如下:

var topbtn = $("#totop"); 想要一键向上的按钮元素 
var lastScroll = 0; 
topbtn.css("display", "none"); window.onscroll = function(){ onscroll貌似为html5的属性 
var top = $(window).scrollTop();初始均为0

if(top > 0){ 
topbtn.css("display", ""); 
} 
if(top == 0){若为起始状态,则不显示向上图标 
topbtn.css("display", "none"); 
} 
}; topbtn.click(function(){ 点击事件 
var scrollTop = 0; 
var curPos = $(window).scrollTop();现在滚动条的位置 
topbtn.addClass("movingtotop"); 运动中显示另外的图片 
var step = Math.abs(scrollTop - curPos) / 200 ; 
var tid = setInterval(function() {不断调用,帧动成画 
topbtn.toggleClass("movingtotop"); 精妙的一段代码,用元素属性的设置和删除交替,使得有动态感闪烁效果 
if (curPos > scrollTop + 14) { 
curPos -= step; 
step = step * 1.05;速度逐步加快 
window.scrollTo(0, curPos); 
} else if (curPos <= scrollTop + 14){直接跳到起始位置 
window.scrollTo(0, scrollTop); 
topbtn.removeClass("movingtotop"); 
clearInterval(tid); 关闭循环 
} 
}, 0.01); 
});
Javascript 相关文章推荐
重载toString实现JS HashMap分析
Mar 13 Javascript
JQuery对checkbox操作 (循环获取)
May 20 Javascript
可自定义速度的js图片无缝滚动示例分享
Jan 20 Javascript
JS实现倒计时和文字滚动的效果实例
Oct 29 Javascript
node.js中的buffer.copy方法使用说明
Dec 14 Javascript
javascript继承的六大模式小结
Apr 13 Javascript
jquery表单验证需要做些什么
Nov 17 Javascript
jQuery基于toggle实现click触发DIV的显示与隐藏问题分析
Jun 12 Javascript
Vue v2.4中新增的$attrs及$listeners属性使用教程
Jan 08 Javascript
Node.JS循环删除非空文件夹及子目录下的所有文件
Mar 12 Javascript
vue-simple-uploader上传成功之后的response获取代码
Sep 07 Javascript
Javascript节流函数throttle和防抖函数debounce
Dec 03 Javascript
简单的js表单验证函数
Oct 28 #Javascript
自己写的Javascript计算时间差函数
Oct 28 #Javascript
Textarea根据内容自适应高度
Oct 28 #Javascript
将json当数据库一样操作的javascript lib
Oct 28 #Javascript
一个JavaScript变量声明的知识点
Oct 28 #Javascript
Javascript实现页面跳转的几种方式分享
Oct 26 #Javascript
javascript中简单的进制转换代码实例
Oct 26 #Javascript
You might like
php visitFile()遍历指定文件夹函数
2010/08/21 PHP
PHP验证信用卡卡号是否正确函数
2015/05/27 PHP
PHP+MySQL统计该库中每个表的记录数并按递减顺序排列的方法
2016/02/15 PHP
Kindeditor编辑器添加图片上传水印功能(php代码)
2017/08/03 PHP
php进行md5加密简单实例方法
2019/09/19 PHP
CL vs ForZe BO5 第一场 2.13
2021/03/10 DOTA
Javascript匿名函数的一种应用 代码封装
2010/06/27 Javascript
Prototype源码浅析 Enumerable部分之each方法
2012/01/16 Javascript
详细解读JavaScript编程中的Promise使用
2015/07/27 Javascript
javascript作用域链(Scope Chain)用法实例解析
2015/11/30 Javascript
jQuery源码解读之extend()与工具方法、实例方法详解
2017/03/30 jQuery
详解Angular2组件之间如何通信
2017/06/22 Javascript
你可能不知道的JSON.stringify()详解
2017/08/17 Javascript
layui 给数据表格加序号的方法
2018/08/20 Javascript
解决Vue 项目打包后favicon无法正常显示的问题
2018/09/01 Javascript
nodejs基础之多进程实例详解
2018/12/27 NodeJs
js get和post请求实现代码解析
2020/02/06 Javascript
[02:57]2014DOTA2国际邀请赛-观众采访
2014/07/19 DOTA
[00:57]林俊杰助阵DOTA2亚洲邀请赛
2015/01/28 DOTA
Python原始字符串(raw strings)用法实例
2014/10/13 Python
深入解析Python中的上下文管理器
2016/06/28 Python
如何安装2019Pycharm最新版本(详细教程)
2019/09/26 Python
Python hashlib模块加密过程解析
2019/11/05 Python
TensorFlow梯度求解tf.gradients实例
2020/02/04 Python
如何通过安装HomeBrew来安装Python3
2020/12/23 Python
瑞典时尚服装购物网站:Miinto.se
2017/10/30 全球购物
美国智能家居专家:tink
2019/06/04 全球购物
德国最大的服装、鞋子和配件在线商店之一:Outfits24
2019/07/23 全球购物
庆八一活动方案
2014/01/25 职场文书
庆七一活动总结
2014/08/27 职场文书
护士求职自荐信范文
2015/03/04 职场文书
上班旷工检讨书
2015/08/15 职场文书
2016庆祝教师节新闻稿
2015/11/25 职场文书
个人销售励志奋斗口号
2019/12/05 职场文书
读《工匠精神》有感:热爱工作,精益求精
2019/12/28 职场文书
如何在C++中调用Python
2021/05/21 Python