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 相关文章推荐
JavaScript 闭包深入理解(closure)
May 27 Javascript
Javascript实现DIV滚动自动滚动到底部的代码
Mar 01 Javascript
jquery实现点击TreeView文本父节点展开/折叠子节点
Jan 10 Javascript
js实现图片无缝滚动
Dec 23 Javascript
JavaScript省市区三级联动菜单效果
Sep 21 Javascript
JS实现数组简单去重及数组根据对象中的元素去重操作示例
Jan 05 Javascript
jQuery实现表格隔行换色
Sep 01 jQuery
使用javascript做时间倒数读秒功能的实例
Jan 23 Javascript
vue项目打包后上传至GitHub并实现github-pages的预览
May 06 Javascript
vue实例的选项总结
Jun 09 Javascript
js属性对象的hasOwnProperty方法的使用
Feb 05 Javascript
vue2的 router在使用过程中遇到的一些问题
Apr 13 Vue.js
简单的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
现磨咖啡骗局!现磨咖啡=新鲜咖啡?现磨咖啡背后的猫腻你不懂!
2019/03/28 冲泡冲煮
php获得当前的脚本网址
2007/12/10 PHP
PHP5权威编程阅读学习笔记 附电子书下载
2012/07/05 PHP
php实现memcache缓存示例讲解
2013/12/04 PHP
laravel5.1框架model类查询的实现方法
2019/10/08 PHP
php中数组最简单的使用方法
2020/12/27 PHP
jquery 插件 任意位置浮动固定层
2008/12/25 Javascript
JQuery slideshow的一个小问题(如何发现及解决过程)
2013/02/06 Javascript
JavaScript支持的最大递归调用次数分析
2014/06/24 Javascript
探讨js字符串数组拼接的性能问题
2014/10/11 Javascript
基于jQuery实现最基本的淡入淡出效果实例
2015/02/02 Javascript
js表格排序实例分析(支持int,float,date,string四种数据类型)
2015/05/06 Javascript
Jquery轮播效果实现过程解析
2016/03/30 Javascript
简单三步实现报表页面集成天气
2016/12/15 Javascript
Javascript中的async awai的用法
2017/05/17 Javascript
Vue axios与Go Frame后端框架的Options请求跨域问题详解
2020/03/03 Javascript
python2.7无法使用pip的解决方法(安装easy_install)
2018/04/03 Python
Python创建普通菜单示例【基于win32ui模块】
2018/05/09 Python
numpy实现神经网络反向传播算法的步骤
2019/12/24 Python
python 窃取摄像头照片的实现示例
2021/01/08 Python
python在协程中增加任务实例操作
2021/02/28 Python
CSS3系列之3D制作方法案例
2017/08/14 HTML / CSS
CSS3 @font-face属性使用指南
2014/12/12 HTML / CSS
SQL里面如何插入自动增长序列号字段
2012/03/29 面试题
车间操作工岗位职责
2013/12/19 职场文书
违反学校规定检讨书
2014/01/18 职场文书
中学教师教育感言
2014/02/21 职场文书
激情洋溢的毕业生就业求职信
2014/03/15 职场文书
安全责任书范文
2014/08/25 职场文书
个人反四风对照检查材料思想汇报
2014/09/23 职场文书
大学生个人总结范文
2015/02/15 职场文书
幼儿园教师师德承诺书
2015/04/28 职场文书
2015年团队工作总结范文
2015/05/04 职场文书
2015年学校消防安全工作总结
2015/10/14 职场文书
小学数学国培研修日志
2015/11/13 职场文书
入伍志愿书怎么写?
2019/07/19 职场文书