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 相关文章推荐
jquery 简短右键菜单 多浏览器兼容
Jan 01 Javascript
javascript简单实现图片预加载
Dec 03 Javascript
angular.foreach 循环方法使用指南
Jan 06 Javascript
JavaScript jquery及AJAX小结
Jan 24 Javascript
bootstrap模态框垂直居中效果
Dec 03 Javascript
关于Promise 异步编程的实例讲解
Sep 01 Javascript
Vue渲染函数详解
Sep 15 Javascript
详解Angular中通过$location获取地址栏的参数
Aug 02 Javascript
vue input标签通用指令校验的实现
Nov 05 Javascript
详解vue或uni-app的跨域问题解决方案
Feb 21 Javascript
JavaScript find()方法及返回数据实例
Apr 30 Javascript
浅谈vue中document.getElementById()拿到的是原值的问题
Jul 26 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初学者头疼问题总结
2006/07/08 PHP
在任意字符集下正常显示网页的方法二(续)
2007/04/01 PHP
PHP 5.3.0 安装分析心得
2009/08/07 PHP
浅析is_writable的php实现
2013/06/18 PHP
解析获取优酷视频真实下载地址的PHP源代码
2013/06/26 PHP
php文件服务实现虚拟挂载其他目录示例
2014/04/17 PHP
Smarty模板配置实例简析
2019/07/20 PHP
在你的网页中嵌入外部网页的方法
2007/04/02 Javascript
从零开始学习jQuery (二) 万能的选择器
2010/10/01 Javascript
jQuery实现下拉框功能实例代码
2016/05/06 Javascript
获取当前按钮或者html的ID名称实例(推荐)
2017/06/23 Javascript
vue使用Element组件时v-for循环里的表单项验证方法
2018/06/28 Javascript
js类的继承定义与用法分析
2019/06/21 Javascript
JavaScript深入V8引擎以及编写优化代码的5个技巧
2019/06/24 Javascript
微信小程序左右滚动公告栏效果代码实例
2019/09/16 Javascript
编写Python脚本批量下载DesktopNexus壁纸的教程
2015/05/06 Python
Python使用urllib2模块实现断点续传下载的方法
2015/06/17 Python
Django应用程序中如何发送电子邮件详解
2017/02/04 Python
浅谈python中copy和deepcopy中的区别
2017/10/23 Python
Python实现多条件筛选目标数据功能【测试可用】
2018/06/13 Python
python中单例常用的几种实现方法总结
2018/10/13 Python
python中列表的切片与修改知识点总结
2019/07/23 Python
Django 多表关联 存储 使用方法详解 ManyToManyField save
2019/08/09 Python
python使用numpy中的size()函数实例用法详解
2021/01/29 Python
为你的html5网页添加音效示例
2014/04/03 HTML / CSS
SmartBuyGlasses英国:购买太阳镜和眼镜
2018/01/29 全球购物
JD Sports德国官网:英国领先的运动鞋和运动服饰零售商
2018/02/26 全球购物
类和结构的区别
2012/08/15 面试题
毕业生求职简历中的自我评价
2013/10/18 职场文书
医疗纠纷协议书
2014/04/16 职场文书
英文推荐信格式范文
2014/05/09 职场文书
大专生求职信
2014/06/29 职场文书
上班迟到检讨书
2014/09/15 职场文书
校园游戏活动新闻稿
2014/10/15 职场文书
2015年毕业生自荐信范文
2015/03/24 职场文书
职场新人刚入职工作总结该怎么写?
2019/05/15 职场文书