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动态创建div
Sep 25 Javascript
跟我一起学写jQuery插件开发方法(附完整实例及下载)
Apr 01 Javascript
鼠标右击事件代码(asp.net后台)
Jan 27 Javascript
高效率JavaScript编写技巧整理
Aug 23 Javascript
node.js中的path.delimiter方法使用说明
Dec 09 Javascript
jQuery中:gt选择器用法实例
Dec 29 Javascript
关于js二维数组和多维数组的定义声明(详解)
Oct 02 Javascript
如何处理JSON中的特殊字符
Nov 30 Javascript
vue.js指令v-model实现方法
Dec 05 Javascript
使用js在layui中实现上传图片压缩
Jun 18 Javascript
微信小程序移动拖拽视图-movable-view实例详解
Aug 17 Javascript
深入理解webpack process.env.NODE_ENV配置
Feb 23 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
关于js和php对url编码的处理方法
2014/03/04 PHP
php禁止直接从浏览器输入地址访问.php文件的方法
2014/11/04 PHP
PHP+AJAX 投票器功能
2017/11/11 PHP
js可突破windows弹退效果代码
2008/08/09 Javascript
JS提交并解析后台返回的XML的代码
2008/11/03 Javascript
基于jQuery的动态增删改查表格信息,可左键/右键提示(原创自Zjmainstay)
2012/07/31 Javascript
自定义右键属性覆盖浏览器默认右键行为实现代码
2013/02/02 Javascript
Javacript实现颜色梯度变化和渐变的效果代码
2013/05/31 Javascript
一个判断抢购时间是否到达的简单的js函数
2014/06/23 Javascript
javascript 判断页面访问方式电脑或者移动端
2016/09/19 Javascript
BootStrap轻松实现微信页面开发代码分享
2016/10/21 Javascript
js实现二级导航功能
2017/03/03 Javascript
jQuery操作DOM_动力节点Java学院整理
2017/07/04 jQuery
node.js爬取中关村的在线电瓶车信息
2018/11/13 Javascript
微信小程序转发事件实现解析
2019/10/22 Javascript
es6中Promise 对象基本功能与用法实例分析
2020/02/23 Javascript
[20:30]职业巡回赛回顾
2018/08/09 DOTA
python直接访问私有属性的简单方法
2016/07/25 Python
Python爬取网易云音乐热门评论
2017/03/31 Python
Python文件的读写和异常代码示例
2017/10/31 Python
python 提取tuple类型值中json格式的key值方法
2018/12/31 Python
pandas ix &amp;iloc &amp;loc的区别
2019/01/10 Python
Python定时任务随机时间执行的实现方法
2019/08/14 Python
使用OpenCV实现仿射变换—旋转功能
2019/08/29 Python
Python hmac模块使用实例解析
2019/12/24 Python
Python 实现向word(docx)中输出
2020/02/13 Python
python实现人机五子棋
2020/03/25 Python
Pygame的程序开始示例代码
2020/05/07 Python
纯CSS3实现给头像加个光芒四射且旋转的背景动画效果
2014/05/07 HTML / CSS
Philosophy美国官网:美国美容品牌
2016/08/15 全球购物
Calzedonia美国官网:意大利风格袜子、打底裤和沙滩装
2018/07/19 全球购物
怎么样写好简历中的自我评价
2013/10/25 职场文书
六查六看自查材料
2014/02/17 职场文书
2016暑期政治学习心得体会
2016/01/23 职场文书
诉讼和解协议书
2016/03/23 职场文书
Golang的继承模拟实例
2021/06/30 Golang