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中函数作为参数调用的方法
Feb 09 Javascript
jQuery实现仿路边灯箱广告图片轮播效果
Apr 15 Javascript
使用JavaScript刷新网页的方法
Jun 04 Javascript
Javascript 事件冒泡机制详细介绍
Oct 10 Javascript
第一次接触Bootstrap框架
Oct 24 Javascript
微信公众号开发 自定义菜单跳转页面并获取用户信息实例详解
Dec 08 Javascript
JS通过调用微信API实现微信支付功能的方法示例
Jun 29 Javascript
JS SetInterval 代码实现页面轮询
Aug 11 Javascript
node.js中path路径模块的使用方法实例分析
Feb 13 Javascript
Vue实现简易计算器
Feb 25 Javascript
vue tab滚动到一定高度,固定在顶部,点击tab切换不同的内容操作
Jul 22 Javascript
vue-router懒加载的3种方式汇总
Feb 28 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.NET的入门教程
2006/10/09 PHP
PHP字符串的递增和递减示例介绍
2014/02/11 PHP
jquery获取多个checkbox的值异步提交给php的方法
2015/06/24 PHP
ThinkPHP使用Smarty第三方插件方法小结
2016/03/19 PHP
javascript 表单的友好用户体现
2009/01/07 Javascript
动态刷新 dorado树的js代码
2009/06/12 Javascript
图片上传判断及预览脚本的效果实例
2013/08/07 Javascript
JavaScript中用sort()方法对数组元素进行排序的操作
2015/06/09 Javascript
jquery获取复选框的值的简单实例
2016/05/26 Javascript
使用jQuery Rotare实现微信大转盘抽奖功能
2016/06/20 Javascript
JQuery对ASP.NET MVC数据进行更新删除
2016/07/13 Javascript
js实现楼层导航功能
2017/02/23 Javascript
详解Vuejs2.0 如何利用proxyTable实现跨域请求
2017/08/03 Javascript
VUE + UEditor 单图片跨域上传功能的实现方法
2018/02/08 Javascript
vue.js使用v-model指令实现的数据双向绑定功能示例
2018/05/22 Javascript
Vue2.0 实现移动端图片上传功能
2018/05/30 Javascript
微信小程序之事件交互操作实例分析
2018/12/03 Javascript
详解可以用在VS Code中的正则表达式小技巧
2019/05/14 Javascript
微信小程序用户授权、位置授权及获取微信绑定手机号
2019/07/18 Javascript
nuxt配置通过指定IP和端口访问的实现
2020/01/08 Javascript
Node.js学习之内置模块fs用法示例
2020/01/22 Javascript
Antd下拉选择,自动匹配功能的实现
2020/10/24 Javascript
vue中defineProperty和Proxy的区别详解
2020/11/30 Vue.js
[54:47]Liquid vs VP Supermajor决赛 BO 第五场 6.10
2018/07/05 DOTA
python为tornado添加recaptcha验证码功能
2014/02/26 Python
Python模拟脉冲星伪信号频率实例代码
2018/01/03 Python
css3给背景图片加颜色遮罩的方法
2019/11/05 HTML / CSS
幼儿园老师辞职信
2014/01/20 职场文书
小学教师师德师风演讲稿
2014/08/22 职场文书
十八大宣传标语
2014/10/09 职场文书
护士先进个人总结
2015/02/13 职场文书
2015年上半年计生工作总结
2015/03/30 职场文书
房产销售员2015年终工作总结
2015/10/22 职场文书
CSS中em的正确打开方式详解
2021/04/08 HTML / CSS
react国际化react-intl的使用
2021/05/06 Javascript
JS数组去重详情
2021/11/07 Javascript