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的图片懒加载js
Jun 30 Javascript
js+JQuery返回顶部功能如何实现
Dec 03 Javascript
JS OffsetParent属性深入解析
Jan 13 Javascript
JS实现漂亮的窗口拖拽效果(可改变大小、最大化、最小化、关闭)
Oct 10 Javascript
深入分析javascript中console命令
Aug 14 Javascript
详解vue-admin和后端(flask)分离结合的例子
Feb 12 Javascript
webpack中的热刷新与热加载的区别
Apr 09 Javascript
Vue2.0学习系列之项目上线的方法步骤(图文)
Sep 25 Javascript
利用Bootstrap Multiselect实现下拉框多选功能
Apr 08 Javascript
angular多语言配置详解
May 16 Javascript
Javascript异步编程async实现过程详解
Apr 02 Javascript
原生js实现购物车
Sep 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
老照片 - 几十年前的收音机与人
2021/03/02 无线电
php存储过程调用实例代码
2013/02/03 PHP
PHP cdata 处理(详细介绍)
2013/07/05 PHP
yii的CURD操作实例详解
2014/12/04 PHP
php实现有趣的人品测试程序实例
2015/06/08 PHP
php中curl和soap方式请求服务超时问题的解决
2018/06/11 PHP
PHP7中I/O模型内核剖析详解
2019/04/14 PHP
讨论javascript(一)工厂方式 js面象对象的定义方法
2009/12/15 Javascript
基于node.js的快速开发透明代理
2010/12/25 Javascript
Extjs中的GridPanel隐藏列会显示在menuDisabled中解决方法
2013/01/27 Javascript
js 弹出框只弹一次(二次修改之后的)
2013/11/26 Javascript
js给页面加style无效果的解决方法
2014/01/20 Javascript
更快的异步执行(setTimeout多浏览器)
2014/08/12 Javascript
JQuery工具函数汇总
2015/06/15 Javascript
js遍历获取表格内数据的方法(必看)
2017/04/06 Javascript
Google 爬虫如何抓取 JavaScript 的内容
2017/04/07 Javascript
使用D3.js构建实时图形的示例代码
2018/08/28 Javascript
vue路由权限校验功能的实现代码
2020/06/07 Javascript
js异步接口并发数量控制的方法示例
2020/11/22 Javascript
python实现对输入的密文加密
2019/03/20 Python
在python里面运用多继承方法详解
2019/07/01 Python
Django框架 信号调度原理解析
2019/09/04 Python
Python数组并集交集补集代码实例
2020/02/18 Python
Python获取对象属性的几种方式小结
2020/03/12 Python
keras中的卷积层&amp;池化层的用法
2020/05/22 Python
python实现MySQL指定表增量同步数据到clickhouse的脚本
2021/02/26 Python
乔丹诺(Giordano)酒庄德国官网:找到最好的意大利葡萄酒
2017/12/28 全球购物
英国独特的时尚和生活方式品牌:JOY
2018/03/17 全球购物
中职生自我鉴定范文
2013/10/03 职场文书
理财计划书
2014/08/14 职场文书
2014小学年度工作总结
2014/12/20 职场文书
自我检讨书范文
2015/01/28 职场文书
仰望星空观后感
2015/06/10 职场文书
Redis持久化与主从复制的实践
2021/04/27 Redis
zabbix agent2 监控oracle数据库的方法
2021/05/13 Oracle
redis缓存存储Session原理机制
2021/11/20 Redis