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实现列表(隔行换色,全选,鼠标滑过当前行)效果实例
Jun 09 Javascript
JS去除右边逗号的简单方法
Jul 03 Javascript
浅析JavaScript中的CSS属性及命名规范
Nov 28 Javascript
jQuery响应鼠标事件并隐藏与显示input默认值
Aug 24 Javascript
JS+CSS实现的经典tab选项卡效果代码
Sep 16 Javascript
JavaScript中对JSON对象的基本操作示例
May 21 Javascript
深入浅出ES6之let和const命令
Aug 25 Javascript
解决URL地址中的中文乱码问题的办法
Feb 10 Javascript
vue-cli项目中使用echarts图表实例
Oct 22 Javascript
微信小程序中的店铺评分组件及vue中用svg实现的评分显示组件
Nov 16 Javascript
Jquery 获取相同NAME 或者id删除行操作
Aug 24 jQuery
实现一个简单得数据响应系统
Nov 11 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
了解咖啡雨林联盟认证 什么是雨林认证 雨林认证是什么意思
2021/03/05 新手入门
Zend公司全球首推PHP认证
2006/10/09 PHP
PHP CURL 多线程操作代码实例
2015/05/13 PHP
Yii框架用户登录session丢失问题解决方法
2017/01/07 PHP
php curl常用的5个经典例子
2017/01/20 PHP
php使用curl获取header检测开启GZip压缩的方法
2018/08/15 PHP
PHP观察者模式实例分析【对比JS观察者模式】
2019/05/22 PHP
在jQuery 1.5中使用deferred对象的代码(翻译)
2011/03/10 Javascript
jQuery动态显示和隐藏datagrid中的某一列的方法
2013/12/11 Javascript
JavaScript中的object转换成number或string规则介绍
2014/12/31 Javascript
DWR3 访问WEB元素的两种方法实例详解
2017/01/03 Javascript
深入理解Javascript中的观察者模式
2017/02/20 Javascript
页面间固定参数,通过cookie传值的实现方法
2017/05/31 Javascript
vue组件watch属性实例讲解
2017/11/07 Javascript
JS文件中加载jquery.js的实例代码
2018/05/05 jQuery
Angular-UI Bootstrap组件实现警报功能
2018/07/16 Javascript
bootstrap Table实现合并相同行
2019/07/19 Javascript
详解钉钉小程序组件之自定义模态框(弹窗封装实现)
2020/03/07 Javascript
Python常见文件操作的函数示例代码
2011/11/15 Python
使用Python的Flask框架表单插件Flask-WTF实现Web登录验证
2016/07/12 Python
基于Python List的赋值方法
2018/06/23 Python
Python SQL查询并生成json文件操作示例
2018/08/17 Python
python+flask实现API的方法
2018/11/21 Python
python分数表示方式和写法
2019/06/26 Python
python飞机大战 pygame游戏创建快速入门详解
2019/12/17 Python
简单了解python shutil模块原理及使用方法
2020/04/28 Python
英国可持续奢侈品包包品牌:Elvis & Kresse
2018/08/05 全球购物
杰夫·班克斯男士服装网上商店:Jeff Banks
2019/10/24 全球购物
毕业生自荐书模版
2014/01/04 职场文书
个人汇报材料范文
2014/12/30 职场文书
2015年底工作总结范文
2015/05/15 职场文书
学校安全管理制度
2015/08/06 职场文书
2016继续教育研修日志
2015/11/13 职场文书
Springboot集成阿里云OSS上传文件系统教程
2021/06/28 Java/Android
《总之就是很可爱》新作短篇动画《总之就是很可爱~制服~》将于2022年夏天播出
2022/04/07 日漫
vue 把二维或多维数组转一维数组
2022/04/24 Vue.js