jquery网页回到顶部效果(图标渐隐,自写)


Posted in Javascript onJune 16, 2014

唔,进来开发需求,当网页内容草鸡多的时候,用户就需要有个按钮快速回到顶部,而不是自己去滚滑轮~

原本以为比较难的说,因为上头要求全部用js来实现,哪个页面引用,哪个页面显示。

于是乎,本?潘烤统⑹孕戳讼拢?恚?环⑾郑?雇?asy的说~~

有屁我就快放了,直接上代码,屁放多了就成屎了~~唔,罪过,阿弥陀佛,阿门~~

<pre name="code" class="javascript">//回到顶部js 
$(function(){ 
var $btn_top = $('<a id="scrollTopBtn"><img src="css/web/images/scrollTop.png"></a>'); 
$btn_top.css({ 
'display':'none', 
'width':'40px', 
'height':'40px', 
'position':'fixed', 
'right':'20px', 
'bottom':'100px', 
'z-index':'999' 
}); 
$("body").append($btn_top); 
$("body").on("click","#scrollTopBtn",function(){ 
$("html,body").animate({scrollTop: 0},"slow"); 
}); 
var $btn = $("#scrollTopBtn"); 
if($(window).scrollTop() > 100){ 
$btn.fadeIn(600); 
} 
$(window).scroll(function(){ 
if($(window).scrollTop() > 100){ 
$btn.fadeIn(600); 
}else{ 
$btn.fadeOut(600); 
} 
}); 
});

图片自己找个就好啦,我这里用的是绝对路径“css/web/images/scrollTop.png”

直接在第五行和第六行改下大小即可,这样就避免了页面添加猫标签~~(>^ω^<)喵~~~

存成js文件,直接引用,哪疼用哪,谁用谁知道~~~

Javascript 相关文章推荐
表单切换,用回车键替换Tab健(不支持IE)
Jul 20 Javascript
学习JavaScript的最佳方法分享
Oct 21 Javascript
JavaScript实现表格快速变色效果代码
Aug 19 Javascript
使用three.js 画渐变的直线
Jun 05 Javascript
Node.js实现文件上传
Jul 05 Javascript
简单实现jQuery上传图片显示预览功能
Jun 29 jQuery
Vue-cli Eslint在vscode里代码自动格式化的方法
Feb 23 Javascript
详解Vue依赖收集引发的问题
Apr 22 Javascript
JS如何定义用字符串拼接的变量
Jul 11 Javascript
Vue实现购物小球抛物线的方法实例
Nov 22 Vue.js
使用AutoJs实现微信抢红包的代码
Dec 31 Javascript
Vue如何清空对象
Mar 03 Vue.js
解决checkbox的attr(checked)一直为undefined问题
Jun 16 #Javascript
Javascript实现简单的富文本编辑器附演示
Jun 16 #Javascript
javascript操纵OGNL标签示例代码
Jun 16 #Javascript
jQuery图片切换插件jquery.cycle.js使用示例
Jun 16 #Javascript
select多选 multiple的使用示例
Jun 16 #Javascript
一个可以增加和删除行的table并可编辑表格中内容
Jun 16 #Javascript
javascript动态判断html元素并执行不同的操作
Jun 16 #Javascript
You might like
PHP常用开发函数解析之数组篇[未完结]
2012/07/30 PHP
如何使用“PHP” 彩蛋进行敏感信息获取
2013/08/07 PHP
CI框架使用composer安装的依赖包步骤与方法分析
2016/11/21 PHP
php数据库的增删改查 php与javascript之间的交互
2017/08/31 PHP
查看大图功能代码jquery版
2013/11/05 Javascript
jquery的clone方法应用于textarea和select的bug修复
2014/06/26 Javascript
jquery中的常用事件bind、hover、toggle等示例介绍
2014/07/21 Javascript
用js提交表单解决一个页面有多个提交按钮的问题
2014/09/01 Javascript
JavaScript的各种常见函数定义方法
2014/09/16 Javascript
jquery实现点击展开列表同时隐藏其他列表
2015/08/10 Javascript
JavaScript直播评论发弹幕切图功能点集合效果代码
2016/06/26 Javascript
javascript 动态脚本添加的简单方法
2016/10/11 Javascript
JS字符串统计操作示例【遍历,截取,输出,计算】
2017/03/27 Javascript
jquery拖动改变div大小
2017/07/04 jQuery
基于nodejs+express4.X实现文件下载的实例代码
2017/07/13 NodeJs
jQueryMobile之窗体长内容的缺陷与解决方法实例分析
2017/09/20 jQuery
Vue项目全局配置页面缓存之按需读取缓存的实现详解
2018/08/01 Javascript
vue3.0中的双向数据绑定方法及优缺点
2019/08/01 Javascript
关于JS模块化的知识点分享
2019/10/16 Javascript
微信小程序使用前置摄像头拍照
2020/10/22 Javascript
[57:31]DOTA2-DPC中国联赛 正赛 SAG vs CDEC BO3 第一场 2月1日
2021/03/11 DOTA
Python中集合的内建函数和内建方法学习教程
2015/08/19 Python
Python爬虫爬取美剧网站的实现代码
2016/09/03 Python
Python cookbook(数据结构与算法)保存最后N个元素的方法
2018/02/13 Python
Python读取txt内容写入xls格式excel中的方法
2018/10/11 Python
解决Tensorflow 使用时cpu编译不支持警告的问题
2020/02/03 Python
Python使用20行代码实现微信聊天机器人
2020/06/05 Python
python gui开发——制作抖音无水印视频下载工具(附源码)
2021/02/07 Python
CSS实现进度条和订单进度条的示例
2020/11/05 HTML / CSS
伊芙丽官方旗舰店:中国淑女一线品牌
2017/12/01 全球购物
台湾专柜女包:KINAZ
2019/12/26 全球购物
请介绍一下Ant
2016/07/22 面试题
寒假家长评语大全
2014/04/16 职场文书
2014年教师党员公开承诺书
2014/05/28 职场文书
新郎新娘答谢词
2015/01/04 职场文书
清洁工岗位职责
2015/02/13 职场文书