【jQuery】scroll 滚动到顶部
Jquery 实现页面滚动到顶端
$(document).ready(function () {
// 滚动窗口来判断按钮显示或隐藏
$(window).scroll(function () {
//根据滚动条距顶部位置,显示还是隐藏top按钮
if ($(this).scrollTop() > 150) {
$('.back-to-top').fadeIn(100);
} else {
$('.back-to-top').fadeOut(100);
}
});
// jQuery实现动画滚动按钮事件
$('.back-to-top').click(function (event) {
event.preventDefault();
$('html, body').animate({ scrollTop: 0 }, 500);
})
});
注意:.back-to-top 的position:fixed;之后就可以了。
【jQuery】scroll 滚动到顶部的更多相关文章
- [HTML/JS] JQuery 页面滚动回到顶部
HTML: <html> <body> <div id="back-to-top" style="cursor:pointer; displ ...
- jacascript 滚动 scroll 与回到顶部
前言:这是笔者学习之后自己的理解与整理.如果有错误或者疑问的地方,请大家指正,我会持续更新! 滚动 scroll scrollHeight 表示元素的总高度,包括由于溢出而无法展示在网页的不可见部分: ...
- 基于jQuery实现页面滚动时顶部导航显示隐藏效果
<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8& ...
- Jquery DIV滚动至浏览器顶部位置固定
获取元素(这里定位元素A)距离顶部的高度,接着设定scroll滚动的事件,比如超过那个高度,把A的位置设定为fixed,小于该高度,修改回relative. 方法一: $(function() { v ...
- [jquery]判断页面滚动到顶部和底部(适用于手机web加载)
//判断页面滚动到顶部和底部 $(window).scroll(function(){ var doc_height = $(document).height(); var scroll_top = ...
- jquery 文字滚动大全 scroll 支持文字或图片 单行滚动 多行滚动 带按钮控制滚动
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- UITableView Scroll to top 手动设置tableview 滚动到 顶部
UITableView Scroll to top 手动设置tableview 滚动到 顶部 [mainTableView scrollRectToVisible:CGRectMake(0,0,1,1 ...
- jQuery火箭图标返回顶部代码
在网上找来段使用jQuery火箭图标返回顶部代码,感觉比较酷,比较炫,大概样式如下, 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1. ...
- scrollTop如何实现click后页面过渡滚动到顶部
用JS操作,body元素的scrollTop var getTop = document.getElementById("get-top"); var head = documen ...
随机推荐
- 利用CSS3D效果制作简易旋转木马效果
最近看一下css3d的一些特性,想着也实验学习一下,制作个小demo之类的.就练习了一下.开发一个粗糙的选择木马效果,如图 其实就是找到角度和位置,计算每根柱子的旋转角度摆放到3d空间的置顶位置即可. ...
- iOS 多线程GCD简介
一.简介 1.1 GCD (Grand Central Dispatch )是Apple开发的一个多核编程的解决方法. Grand 含义是“伟大的.宏大的”,Central含义“中央的”,Dispat ...
- 如何正确响应ArcGIS JavaScript API中图形的鼠标事件
在使用ArcGIS JavaScript API编写程序的时候,程序员往往需要完成这样一个功能:点击地图上的图形,自动进行专题GIS数据查询,当在地图非图形区域上点击时,自动进行底图兴趣点查询. 由于 ...
- 通过API执行AutoCAD命令来…
大家知道AutoCAD功能丰富,而更可贵的是,这么多丰富的功能背后都有一个命令,有些东西,直接用API调用写起来可能很费劲或者无法实现,可如果能用命令的话却很简单,这时候我们就可以通过API来调用Au ...
- [Android]Google 开源的 Android 排版库:FlexboxLayout
最近Google开源了一个项目叫「FlexboxLayout」. 1.什么是 Flexbox 简单来说 Flexbox 是属于web前端领域CSS的一种布局方案,是2009年W3C提出了一种新的布局方 ...
- addEventListener和attachEvent的区别
addEventListener共有3个参数,如下所示:element.addEventListener(type,listener,useCapture); 参数 参数说明 element 要绑定事 ...
- iOS Swift-注释与分号
iOS Swift-注释与分号 注释 注释是每门语言都存在的一种解释方式,Swift的注释与C语言的注释非常相似,单行注释采用//. //这是一个注释 在Swift中也可以使用多行注释,起始标记使用( ...
- UIweib的简单实用
- IT从业者的职业道路(从程序员到部门经理) - 项目管理系列文章
十年前,笔者还是一个刚毕业的大学生,对IT业只是停留在学校的编程知识领域.刚出社会,有很多需要学习的地方.在这十年间,笔者经历了程序员,技术经理,项目经理,部门经理等职位.本文就是要说说如何从程序员到 ...
- 解决方法:未在本地计算机上注册“Microsoft.Jet.OLEDB.4.0”提供程序
在Windows Server 2008 x64 上部署一个Vs 2008开发的.net2.0 的asp.net web 程序,调用了office的组件来导入导出excel文件,其中托管管道模式为集成 ...