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 相关文章推荐
js trim函数 去空格函数与正则集锦
Nov 20 Javascript
让textarea自动调整大小的js代码
Apr 12 Javascript
Moment.js 不容错过的超棒Javascript日期处理类库
Apr 15 Javascript
javascript 实现键盘上下左右功能的小例子
Sep 15 Javascript
javascript+HTML5的Canvas实现Lab单车动画效果
Aug 07 Javascript
Spring mvc 接收json对象
Dec 10 Javascript
Vue组件化通讯的实例代码
Jun 23 Javascript
基于jquery trigger函数无法触发a标签的两种解决方法
Jan 06 jQuery
JS实现520 表白简单代码
May 21 Javascript
原生JavaScript创建不可变对象的方法简单示例
May 07 Javascript
jQuery HTML设置内容和属性操作实例分析
May 20 jQuery
在Vue中使用mockjs代码实例
Nov 25 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上传后台无法收到数据解决方法
2019/10/28 PHP
JavaScript DOM学习第六章 表单实例
2010/02/19 Javascript
jQuery编写widget的一些技巧分享
2010/10/28 Javascript
javascript返回顶部效果(自写代码)
2013/01/06 Javascript
jquery图片轮播插件仿支付宝2013版全屏图片幻灯片
2014/04/03 Javascript
js实现二级菜单渐隐显示
2015/11/03 Javascript
jQuery抛物线运动实现方法(附完整demo源码下载)
2016/01/08 Javascript
JS动态遍历json中所有键值对的方法(不知道属性名的情况)
2016/12/28 Javascript
浅谈Angular4中常用管道
2017/09/27 Javascript
vue父组件点击触发子组件事件的实例讲解
2018/02/08 Javascript
JavaScript使用prototype原型实现的封装继承多态示例
2018/08/31 Javascript
实例详解vue中的$root和$parent
2019/04/29 Javascript
ant-design表单处理和常用方法及自定义验证操作
2020/10/27 Javascript
js实现抽奖功能
2020/11/24 Javascript
[01:03:36]Ti4 循环赛第三日DK vs Titan
2014/07/12 DOTA
新手该如何学python怎么学好python?
2008/10/07 Python
python BeautifulSoup设置页面编码的方法
2015/04/03 Python
低版本中Python除法运算小技巧
2015/04/05 Python
python在Windows下安装setuptools(easy_install工具)步骤详解
2016/07/01 Python
Python使用文件锁实现进程间同步功能【基于fcntl模块】
2017/10/16 Python
Python Pandas数据中对时间的操作
2019/07/30 Python
Python+OpenCV图像处理——打印图片属性、设置存储路径、调用摄像头
2020/10/22 Python
物业公司采购员岗位职责
2013/12/31 职场文书
电子信息专业自荐书
2014/02/04 职场文书
《海底世界》教学反思
2014/04/16 职场文书
法人委托书
2014/07/31 职场文书
党支部组织生活会整改方案
2014/09/30 职场文书
2014年卫生工作总结
2014/11/27 职场文书
2014年节能降耗工作总结
2014/12/11 职场文书
人力资源部岗位职责
2015/02/11 职场文书
2015年世界无车日活动总结
2015/03/23 职场文书
Python 线程池模块之多线程操作代码
2021/05/20 Python
Python机器学习之底层实现KNN
2021/06/20 Python
Vue图片裁剪组件实例代码
2021/07/02 Vue.js
Nginx反向代理至go-fastdfs案例讲解
2021/08/02 Servers
css样式important规则的正确使用方式
2022/06/10 HTML / CSS