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 switch case 另类写法
Mar 14 Javascript
jQuery EasyUI API 中文文档 - TimeSpinner时间微调器
Oct 23 Javascript
javascript实现将文件保存到本地方法汇总
Jul 26 Javascript
JavaScript调用传递变量参数的相关问题及解决办法
Nov 01 Javascript
深入浅析JavaScript中prototype和proto的关系
Nov 15 Javascript
详解Angular开发中的登陆与身份验证
Jul 27 Javascript
vue 实现类似淘宝星级评分的示例
Mar 01 Javascript
利用JS实现一个同Excel表现的智能填充算法
Aug 13 Javascript
基于vue实现一个神奇的动态按钮效果
May 15 Javascript
js 计算月/周的第一天和最后一天代码
Feb 01 Javascript
Vue使用JSEncrypt实现rsa加密及挂载方法
Feb 07 Javascript
javascript中layim之查找好友查找群组
Feb 06 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
PHP 利用Mail_MimeDecode类提取邮件信息示例
2014/01/26 PHP
用PHP解决的一个栈的面试题
2014/07/02 PHP
php简单smarty入门程序实例
2015/06/11 PHP
PHP中抽象类,接口功能、定义方法示例
2019/02/26 PHP
ThinkPHP3.2框架自带分页功能实现方法示例
2019/05/13 PHP
一个用js实现控制台控件的代码
2007/09/04 Javascript
ajax 缓存 问题 requestheader
2010/08/01 Javascript
Javascript异步编程的4种方法让你写出更出色的程序
2013/01/17 Javascript
jQuery滚动加载图片效果的实现
2013/03/06 Javascript
JS+flash实现chrome和ie浏览器下同时可以复制粘贴
2013/09/22 Javascript
jQuery使用之处理页面元素用法实例
2015/01/19 Javascript
jQuery实现的分页功能示例
2017/01/22 Javascript
js仿微信公众平台打标签功能
2017/04/08 Javascript
react写一个select组件的实现代码
2019/04/03 Javascript
利用Python暴力破解zip文件口令的方法详解
2017/12/21 Python
Python使用matplotlib绘制余弦的散点图示例
2018/03/14 Python
pandas中的DataFrame按指定顺序输出所有列的方法
2018/04/10 Python
Python实现多属性排序的方法
2018/12/05 Python
详解pandas安装若干异常及解决方案总结
2019/01/10 Python
Tensorflow限制CPU个数实例
2020/02/06 Python
Python sklearn库实现PCA教程(以鸢尾花分类为例)
2020/02/24 Python
django API 中接口的互相调用实例
2020/04/01 Python
Django 解决上传文件时,request.FILES为空的问题
2020/05/20 Python
Pyinstaller 打包发布经验总结
2020/06/02 Python
有关pycharm登录github时有的时候会报错connection reset的问题
2020/09/15 Python
python爬虫中采集中遇到的问题整理
2020/11/27 Python
德国户外商店:eXXpozed
2020/07/25 全球购物
优秀员工自荐书
2013/12/19 职场文书
2014社区三八妇女节活动方案
2014/03/30 职场文书
企业法人授权委托书
2014/04/03 职场文书
员工工作表现自我评价
2015/03/06 职场文书
幼儿园家长反馈意见
2015/06/03 职场文书
大学开学典礼新闻稿
2015/07/17 职场文书
感恩主题班会教案
2015/08/12 职场文书
毕业季聚会祝酒词!
2019/07/04 职场文书
Windows中Redis安装配置流程并实现远程访问功能
2021/06/07 Redis