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实现的可视化表单设计器源码。实现的可视化表单设计器。基于Vue的可视化表单设计器,让表单开发简单而高效。 特性如下: 可视化配置页面 提供栅格布局,并采用flex实现对齐 一键预览配置的效果 一键生成...
主要为大家详细介绍了js简单实现网页换肤功能,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
两天前听了一个H5的分享,...今年下半年打算在组内建个叫『移动开发指南』的站点,在网站框架搭建过程,有一个功能需要实现复制文本到剪贴板,相信这个功能很常用,但是对于不常写JS代码的我来说是一个比较大的挑战,回
pc或者移动端实现换肤功能还是比较简单的,大致就是需要换肤的css,还有正常的css;把当前皮肤类型存入本地;然后通过js读取并判断当前应该加载哪套css。 由于微信小程序没有操作wxss的api,所以实现的方式有点不...
播放视频的可选功能 按住ALT并单击RD按钮,如果视频将开始以VLC或WMP或...播放。 注意:如果您直接访问主机,则ex upload.to/file ... Pay Attention => RD按钮将显示在右上角。 1.快速n简单安装指南 安装以下之一...
bootstrap input 框 清除 小插件、很简单的一个小的js,引入即可。省时省力。
nodejs+express-实现文件上传下载管理的网站 ...后端:基于nodejs的express的web框架. ... 纯css+jQuery实现一键返回顶部。 简单的ajax异步刷新。 项目结构总览: app/:典型的MVC架构,其下包含模型(models
Vue+Fabric.js实现H5 移动端简单的图片的可视化编辑、预览、下载等功能。 文本编辑:实现画布上的文本框的添加、字体属性的设置、样式风格编辑、背景颜色个性化设置、文本内容的设置等; 图片上传:点击上传图片,...
本文给大家分享一段js代码实现搜索框文字可删除功能,代码简单易懂,非常不错,具有参考借鉴价值,需要的朋友参考下吧
引用qrcode.js生成二维码并提供下载功能(使用简单,功能强大,不用写任何样式,一键引入js文件即可)
强大的一键生成功能(包括控制器、模型、视图、菜单等) 支持多数据源,简单配置即可实现切换。 支持按钮及数据权限,可自定义部门数据权限。 对常用js插件进行二次封装,使js代码变得简洁,更加易维护 完善的XSS...
强大的一键生成功能(包括控制器、模型、视图、菜单等) 支持多数据源,简单配置即可实现切换。 支持按钮及数据权限,可自定义部门数据权限。 对常用js插件进行二次封装,使js代码变得简洁,更加易维护 完善的XSS...
另外,简易的AI抠图工具更是支持上传图片一键去除背景,帮助用户更好地进行海报设计。 安装教程: 环境需求:Node.js v16.18 以上版本 安装依赖 本地运行如果你本地没有成功启动两个服务,可能是 win 系统不兼容,...
#主要特性 完全响应式布局(支持电脑、平板、手机等所有主流设备) 强大的一键生成功能(包括控制器、模型、视图、菜单等) 支持多数据源,简单配置即可实现切换。 支持按钮及数据权限,可自定义部门数据权限。 对...
启航建材企业建站系统,该系统做到企业站动态模版化,代码界面分离,是一套为网站用户提供无技术门坎、操作简单、维护方便、功能强大、 安全可靠的建站工具。网站模版丰富,可任您满意选择,让您在几分钟内快速掌握...
7 :加强搜索功能,对于内容字段后台做相应的调整,即可实现内容搜索 8 :优化采集,部分条件支持正则匹配,采集规则增加TAG标签,对采集的内容可以批量加入标签 9 :修改整合接口,增加blog栏目整合,完善PW,DZ...
湖大信科IT综合管理系统 枫树小组 运行环境部署 用git clone项目到本地仓库 创建Mysql数据库,数据库名称:mapleemsplus,并执行sql文件夹下的mapleemsmplus.sql文件 用ieda介绍maven项目HtxkEmsm ...
一个由支持的快速,简单且功能强大的博客框架。 | | | | | | 产品特点 快速生成 支持GitHub Flavored Markdown和大多数Octopress插件 一键部署到GitHub Pages,Heroku等 强大的API可实现无限扩展 数以百计的和 ...