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 相关文章推荐
jQuery对象和DOM对象使用说明
Jun 25 Javascript
一个简单的JavaScript数据缓存系统实现代码
Oct 24 Javascript
JQuery.closest(),parent(),parents()寻找父结点
Feb 17 Javascript
javascript实现TreeView 无刷新展开的实例代码
Jul 13 Javascript
Jquery实现纵向横向菜单
Jan 24 Javascript
javascript动态获取登录时间和在线时长
Feb 25 Javascript
Knockoutjs 学习系列(一)ko初体验
Jun 07 Javascript
简单的vue-resourse获取json并应用到模板示例
Feb 10 Javascript
微信小程序中显示html格式内容的方法
Apr 25 Javascript
解决OneThink中无法异步提交kindeditor文本框中修改后的内容方法
May 05 Javascript
用vue的双向绑定简单实现一个todo-list的示例代码
Aug 03 Javascript
Javascript实现运算符重载详解
Apr 07 Javascript
解决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中变量及部分适用方法
2008/03/27 PHP
php+MySql实现登录系统与输出浏览者信息功能
2016/07/01 PHP
关于B/S判断浏览器断开的问题讨论
2008/10/29 Javascript
js获取class的所有元素
2013/03/28 Javascript
uploadify在Firefox下丢失session问题的解决方法
2013/08/07 Javascript
原始的js代码和jquery对比体会
2013/09/10 Javascript
Js表格万条数据瞬间加载实现代码
2014/02/20 Javascript
jquery实现点击文字可编辑并修改保存至数据库
2014/04/15 Javascript
js+jquery实现图片裁剪功能
2015/01/02 Javascript
AngularJS入门教程之控制器详解
2016/07/27 Javascript
jQuery ajax MD5实现用户注册即时验证功能
2016/10/11 Javascript
Vue.JS入门教程之自定义指令
2016/12/08 Javascript
jQuery Pagination分页插件使用方法详解
2017/02/28 Javascript
vue.js移动端app之上拉加载以及下拉刷新实战
2017/09/11 Javascript
vue内置指令详解
2018/04/03 Javascript
Vue入门之animate过渡动画效果
2018/04/08 Javascript
JS实现获取word文档内容并输出显示到html页面示例
2018/06/23 Javascript
vue实现条件叠加搜索的解决方法
2019/05/28 Javascript
JS函数进阶之prototy用法实例分析
2020/01/15 Javascript
python练习程序批量修改文件名
2014/01/16 Python
Python Web框架Flask中使用新浪SAE云存储实例
2015/02/08 Python
python实现从字典中删除元素的方法
2015/05/04 Python
在DigitalOcean的服务器上部署flaskblog应用
2015/12/19 Python
python 根据pid杀死相应进程的方法
2017/01/16 Python
Python实现判断并移除列表指定位置元素的方法
2018/04/13 Python
用python监控服务器的cpu,磁盘空间,内存,超过邮件报警
2021/01/29 Python
在线购买世界上最好的酒:BoozeBud
2018/06/07 全球购物
英国泽西岛植物:Jersey Plants Direct
2019/08/07 全球购物
UNIX命令速查表
2012/03/10 面试题
2014年扫黄打非工作总结
2014/12/03 职场文书
先进党支部申报材料
2014/12/24 职场文书
2016企业先进集体事迹材料
2016/02/25 职场文书
MySQL InnoDB ReplicaSet(副本集)简单介绍
2021/04/24 MySQL
JavaWeb 入门篇:创建Web项目,Idea配置tomcat
2021/07/16 Java/Android
golang使用map实现去除重复数组
2022/04/14 Golang
Android Studio 计算器开发
2022/05/20 Java/Android