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

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);
});

赞 (0)

相关推荐

  • js控制的回到页面顶端goTop的代码实现

    js控制的回到页面顶端goTop的代码实现

    有没有见过很多在页面的右下角有个[回到顶端]的悬浮东东,并且在开始时没有,一移动滚动条就出现,回到了顶端又消失的样子. 像: 控制的js代码如下: 复制代码 代码如下: function goTop(){ var _btn = document.getElementById("goTop"); if (document.documentElement && document.documentElement.scrollTop) { var _con = document

  • 返回页面顶部top按钮通过锚点实现(自写)

    返回页面顶部top按钮通过锚点实现(自写)

    实现了我的小跳槽以后,从8月7号入职了现在的这家公司,我好像是加入了救火队的行列,还没有开始开发新的模块,只是一直在实现已经上线模块中的新需求,有时候也真想问问,某些用户的脑子是不是进水了,提出来的需求只想让人大笑三声...幸好项目组做需求的姐姐工作经验十分丰富,能够很好地和用户协调,让我们这些开发人员也没那么辛苦~ 用户在使用系统时,会有很多表单的操作,然而很多表单都是裹脚布啊,长啊长~ 所以就需要一个返回页面顶部的top按钮啦~ 虽然说网上的方法有很多种,但是未免过于繁琐.左一个判断又一个定

  • javascript返回顶部效果(自写代码)

    现在很多网站都用到了返回顶部的效果,当然懒的话也可以直接 a 链接链到 #,这样也可以达到效果.今天抽空用原生 javascript 写了个,由于本人水平有限,如有问题请指出. html 代码: 复制代码 代码如下: <!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8"> <title>js-回到顶部</title> &

  • 页面回到顶部的三种实现(锚标记，js)

    本文介绍三款简单的返回页面顶部代码,可以使用简单的HTML(http://www.jb51.net/web/62651.html) 锚标记,也可使用Javascript Scroll (http://www.jb51.net/article/31422.htm) 函数动态返回,其它的还有悬浮脚本等有点复杂了,本文不再介绍,大家根据自己需要选择其中的一种即可,总之简约最美的,能减少代码就减少代码,能不调用的就别调用,要不是天缘博客的文章都是牛长也不会添加这个功能. 一.使用锚标记返回页面顶部 使用

  • 一个简单的弹性返回顶部JS代码实现介绍

    一个简单的弹性返回顶部JS代码实现介绍

    昨天做了一个这样的功能,贴出来参考. HTML/JS/CSS代码: 复制代码 代码如下: <!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"> &l

  • 纯文字版返回顶端的js代码

    复制代码 代码如下: <script language="javascript">var goto_top_type = -1;var goto_top_itv = 0;function goto_top_timer() { var y = goto_top_type == 1 ? document.documentElement.scrollTop   : document.body.scrollTop; var moveby = 15; y -= Math.ceil(y

  • 基于jquery的回到页面顶部按钮

    css代码: 复制代码 代码如下: .scroll-up { background: #dcdcdc url('up.png') no-repeat center center; width:48px !important; /*for ff and other standard browser*/ height:48px !important; _width: 58px; /*for IE6 nonstandard box model*/ _height: 58px; position: fi

  • js滚动条回到顶部的代码

    虽然平滑性处理的不好,但非常适合学习 复制代码 代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="en"> <head> <meta http-equiv="Content-Type" content="tex

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

    1.基础准备: scrollTop() 方法返回或设置匹配元素的滚动条的垂直位置. scroll top offset 指的是滚动条相对于其顶部的偏移. 如果该方法未设置参数,则返回以像素计的相对滚动条顶部的偏移. 语法 $(selector).scrollTop(offset) 2. toggleClass() 对设置或移除被选元素的一个或多个类进行切换. 例如对设置和移除所有 <p> 元素的 "main" 类进行切换: 复制代码 代码如下: $("button

  • jsp实现上一页下一页翻页功能(示例代码)

    jsp实现上一页下一页翻页功能(示例代码)

    前段时间一直忙于期末考试和找实习,好久没写博客了. 这段时间做了个小项目,包含了翻页和富文本编辑器Ueditor的两个知识点,Ueditor玩的还不是很深,打算玩深后再写篇博客. 要实现翻页功能,只需要设置一个pageIndex即可,然后每次加载页面时通过pageIndex去加载数据就行. 那么我们可以设置一个隐藏的input框,用于传递pageIndex给下个页面. 当我们点击上一页的时候,通过js方法改变pageIndex的值,再提交表单即可 二话不多说,看代码,代码里面写的还算比较清楚.

  • BootStrap中的模态框（modal，弹出层）功能示例代码

    BootStrap中的模态框（modal，弹出层）功能示例代码

    bootstrap中的模态框(modal),不同于Tooltips,模态框以弹出对话框的形式出现,具有最小和最实用的功能集.务必将模态框的 HTML 代码放在文档的最高层级内(也就是说,尽量作为 body 标签的直接子元素),以避免其他组件影响模态框的展现或功能. 默认的modal示例: <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8">

  • 微信小程序实现列表滚动头部吸顶的示例代码

    本文介绍了小程序头部吸顶的实现代码示例,分享给大家,也给自己留个笔记 demo 地址: https://github.com/iotjin/Jh_weapp 效果图: 吸顶主要是 position: sticky; .header { background: rgb(230, 230, 230); height: 25px; line-height: 25px; padding-left: 30rpx; font-size: 13px; align-items: center; position

  • vue移动端写的拖拽功能示例代码

    相关知识点 touchstart 当在屏幕上按下手指时触发 touchmove 当在屏幕上移动手指时触发 touchend 当在屏幕上抬起手指时触发 mousedown mousemove mouseup对应的是PC端的事件 touchcancel 当一些更高级别的事件发生的时候(如电话接入或者弹出信息)会取消当前的touch操作,即触发 touchcancel.一般会在touchcancel时暂停游戏.存档等操作. 效果图 实现步骤html 总结了一下评论,好像发现大家都碰到了滑动的问题.就在

  • 原生JS实现音乐播放器的示例代码

    原生JS实现音乐播放器的示例代码

    本文主要介绍了原生JS实现音乐播放器的示例代码,分享给大家,具体如下: 效果图 音乐播放器 播放控制 播放进度条控制 歌词显示及高亮 播放模式设置 播放器属性归类 按照播放器的功能划分,对播放器的属性和DOM元素归类,实现同一功能的元素和属性保存在同一对象中,便于管理和操作 const control = { //存放播放器控制 play: document.querySelector('#myplay'), ... index: 2,//当前播放歌曲序号 ... } const audioFi

  • js生成二维码的示例代码

    js生成二维码的示例代码

    前段时间项目中需要开发扫描二维码查看信息的功能,在网上查了一些资料,把用过的方法进行总结需要导入一个qrcode的js 插件. 插件链接: qrcode.js下载地址,点击即可下载 一.一个简单的示例 如下:(仅供参考) <%-- Created by IntelliJ IDEA. User: ASUS author:xumz Date: 2021/2/27 Time: 10:33 搬运请备注 To change this template use File | Settings | File

  • 基于JS实现弹性漂浮广告的示例代码

    基于JS实现弹性漂浮广告的示例代码

    目录 效果图 1.功能(鼠标移入移出事件.点击事件.定时器控制移动) 2.div初始样式设置 3.获取div可以移动的页面大小 4.定时器控制移动,鼠标移入事件停止移动,鼠标移出继续移动. 5.点击事件点击让div消失 6.完整代码 效果图 1.功能(鼠标移入移出事件.点击事件.定时器控制移动) div实现在页面上移动,并判断碰到页面边框反弹,鼠标移入div停止移动,鼠标移出div进行移动,点击div让它从页面消失,定时器控制它的移动. 2.div初始样式设置 //div(广告)获取节点 var

  • 基于JS实现蜘蛛侠动作游戏的示例代码

    基于JS实现蜘蛛侠动作游戏的示例代码

    目录 代码结构 代码展示 HTML JS 项目运行 游戏截图 整个游戏源码是由html.js. css.图片等代码完成的,无后端数据保存功能. 代码结构 js文件夹是游戏事件控制文件 vapp文件夹是游戏图片文件 icon.png 是网页游戏图标 index.html 是游戏主页 代码展示 HTML index.html代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http:/

  • 基于JS实现动态跟随特效的示例代码

    基于JS实现动态跟随特效的示例代码

    目录 演示 技术栈 源码 css部分 js部分 演示 技术栈 这次用到了关于css的一些功能,和jQuery. CSS3中添加的新属性animation是用来为元素实现动画效果的,但是animation无法单独担当起实现动画的效果.承载动画的另一个属性——@keyframes.使用的时候为了兼容可加上-webkit-.-o-.-ms-.-moz-.-khtml-等前缀以适应不同的浏览器. 创建动画的原理是,将一套 CSS 样式逐渐变化为另一套样式. 通过 @keyframes 规则,您能够创建动

随机推荐