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 相关文章推荐
JavaScript高级程序设计 阅读笔记(十三) js定义类或对象
Aug 14 Javascript
jQuery提交多个表单的小例子
Jun 30 Javascript
EasyUI中实现form表单提交的示例分享
Mar 01 Javascript
Javascript连接Access数据库完整实例
Aug 03 Javascript
jQuery实现hover合成事件的方法
Aug 06 Javascript
详解jQuery简单的表单应用
Dec 16 Javascript
从零学习node.js之搭建http服务器(二)
Feb 21 Javascript
Vue + Webpack + Vue-loader学习教程之功能介绍篇
Mar 14 Javascript
react-native-tab-navigator组件的基本使用示例代码
Sep 07 Javascript
微信小程序使用radio显示单选项功能【附源码下载】
Dec 11 Javascript
微信小程序实时聊天WebSocket
Jul 05 Javascript
微信小程序实现组件顶端固定或底端固定效果(不随滚动而滚动)
Apr 09 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
Apache服务器下防止图片盗链的办法
2015/07/06 PHP
php插入mysql数据返回id的方法
2018/05/31 PHP
php 可变函数使用小结
2018/06/12 PHP
详解在YII2框架中使用UEditor编辑器发布文章
2018/11/02 PHP
js弹出层(jQuery插件形式附带reLoad功能)
2013/04/12 Javascript
在浏览器中打开或关闭JavaScript的方法
2015/06/03 Javascript
在JavaScript的正则表达式中使用exec()方法
2015/06/16 Javascript
Javascript技术难点之apply,call与this之间的衔接
2015/12/04 Javascript
jquery遍历函数siblings()用法实例
2015/12/24 Javascript
原生js实现自由拖拽弹窗代码demo
2016/06/29 Javascript
AngularGauge 属性解析详解
2016/09/06 Javascript
BootStrap给table表格的每一行添加一个按钮事件
2017/09/07 Javascript
vue路由跳转时判断用户是否登录功能的实现
2017/10/26 Javascript
ReactNative实现Toast的示例
2017/12/31 Javascript
vue学习之Vue-Router用法实例分析
2020/01/06 Javascript
jQuery实现移动端图片上传预览组件的方法分析
2020/05/01 jQuery
微信小程序中使用 async/await的方法实例分析
2020/05/06 Javascript
在vue项目中利用popstate处理页面返回的操作介绍
2020/08/06 Javascript
详解python之简单主机批量管理工具
2017/01/27 Python
机器学习python实战之手写数字识别
2017/11/01 Python
pip安装时ReadTimeoutError的解决方法
2018/06/12 Python
Django处理多用户类型的方法介绍
2019/05/18 Python
Python如何使用k-means方法将列表中相似的句子归类
2019/08/08 Python
pytorch 获取tensor维度信息示例
2020/01/03 Python
Django多个app urls配置代码实例
2020/11/26 Python
联想哥伦比亚网上商城:Lenovo Colombia
2017/01/10 全球购物
瑞士隐形眼镜和护理产品网上商店:Linsenklick
2019/10/21 全球购物
我的applet原先好好的, 一放到web server就会有问题,为什么?
2016/05/10 面试题
文秘自荐信
2013/10/20 职场文书
大四毕业生学习总结的自我评价
2013/10/31 职场文书
抄作业检讨书
2014/02/17 职场文书
机械设计及其自动化求职推荐信
2014/02/17 职场文书
我们的节日清明节活动方案
2014/03/05 职场文书
2014年工会工作总结
2014/11/12 职场文书
个人优缺点总结
2015/02/28 职场文书
个人年终总结结尾
2015/03/06 职场文书