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 EasyUI API 中文文档 - NumberSpinner数值微调器使用介绍
Oct 21 Javascript
ASP.NET jQuery 实例11 通过使用jQuery validation插件简单实现用户登录页面验证功能
Feb 03 Javascript
JavaScript中的面向对象介绍
Jun 30 Javascript
jquery入门—数据删除与隔行变色以及图片预览
Jan 07 Javascript
IE6 hack for js 集锦
Sep 23 Javascript
js实现将选中值累加到文本框的方法
Aug 12 Javascript
JavaScript生成验证码并实现验证功能
Sep 24 Javascript
jQuery移除或禁用html元素点击事件常用方法小结
Feb 10 Javascript
第一次记录Bootstrap table学习笔记(1)
May 18 Javascript
vue 解决路由只变化参数页面组件不更新问题
Nov 05 Javascript
详解vue高级特性
Jun 09 Javascript
在Uni中使用Vue的EventBus总线机制操作
Jul 31 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
fleaphp下不确定的多条件查询的巧妙解决方法
2008/09/11 PHP
php快速url重写更新版[需php 5.30以上]
2010/04/25 PHP
php处理文件的小例子(解压缩,删除目录)
2013/02/03 PHP
解析link_mysql的php版
2013/06/30 PHP
浅析php中json_encode()和json_decode()
2014/05/25 PHP
php curl 获取https请求的2种方法
2015/04/27 PHP
用PHP的反射实现委托模式的讲解
2019/03/22 PHP
javascript之锁定表格栏位
2007/06/29 Javascript
一些mootools的学习资源
2010/02/07 Javascript
javascript中关于break,continue的特殊用法与介绍
2012/05/24 Javascript
jquery ajax jsonp跨域调用实例代码
2013/12/11 Javascript
Javascript堆排序算法详解
2014/12/03 Javascript
使用Jquery实现每日签到功能
2015/04/03 Javascript
jQuery插件Zclip实现完美兼容个浏览器点击复制内容到剪贴板
2015/04/30 Javascript
js操作css属性实现div层展开关闭效果的方法
2015/05/11 Javascript
JavaScript中将数组进行合并的基本方法讲解
2016/03/07 Javascript
Bootstrap编写一个兼容主流浏览器的受众门户式风格页面
2016/07/01 Javascript
JavaScript实现审核流程状态的动态显示进度条
2017/03/15 Javascript
vue绑定设置属性的多种方式(5)
2017/08/16 Javascript
记录vue做微信自定义分享的一些问题
2019/09/12 Javascript
JavaScript内置对象之Array的使用小结
2020/05/12 Javascript
[01:18:43]2014 DOTA2华西杯精英邀请赛5 24 iG VS DK
2014/05/25 DOTA
[36:17]DOTA2上海特级锦标赛 - VGL音乐会全集
2016/03/06 DOTA
Python实现删除Android工程中的冗余字符串
2015/01/19 Python
Python实现栈的方法
2015/05/26 Python
简要讲解Python编程中线程的创建与锁的使用
2016/02/28 Python
python thrift搭建服务端和客户端测试程序
2018/01/17 Python
Python利用pandas处理Excel数据的应用详解
2019/06/18 Python
详解Selenium+PhantomJS+python简单实现爬虫的功能
2019/07/14 Python
django 单表操作实例详解
2019/07/30 Python
Python Pillow.Image 图像保存和参数选择方式
2020/01/09 Python
python实现滑雪游戏
2020/02/22 Python
基于logstash实现日志文件同步elasticsearch
2020/08/06 Python
css3 border旋转时的动画应用
2016/01/22 HTML / CSS
群众路线党课主持词
2014/04/01 职场文书
Python中的xlrd模块使用整理
2021/06/15 Python