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中删除元素的实现代码
Dec 29 Javascript
解决ueditor jquery javascript 取值问题
Dec 30 Javascript
jQuery实现渐变下拉菜单的简单方法
Mar 11 Javascript
第四章之BootStrap表单与图片
Apr 25 Javascript
js实现导航吸顶效果
Feb 24 Javascript
JQuery判断正整数整理小结
Aug 21 jQuery
微信小程序实现获取准确的腾讯定位地址功能示例
Mar 27 Javascript
js canvas实现5张图片合成一张图片
Jul 15 Javascript
jquery实现直播弹幕效果
Nov 28 jQuery
Vue ​v-model相关知识总结
Jan 28 Vue.js
微信小程序实现点赞业务
Feb 10 Javascript
如何让vue长列表快速加载
Mar 29 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
推荐文章系统(一)
2006/10/09 PHP
Notice: Trying to get property of non-object problem(PHP)解决办法
2012/03/11 PHP
关于mysql字符集设置了character_set_client=binary 在gbk情况下会出现表描述是乱码的情况
2013/01/06 PHP
laravel 5 实现模板主题功能(续)
2015/03/02 PHP
apache php mysql开发环境安装教程
2016/07/28 PHP
浅谈htmlentities 、htmlspecialchars、addslashes的使用方法
2016/12/09 PHP
PHP排序算法之直接插入排序(Straight Insertion Sort)实例分析
2018/04/20 PHP
Laravel使用swoole实现websocket主动消息推送的方法介绍
2019/10/20 PHP
JQueryEasyUI datagrid框架的进阶使用
2013/04/08 Javascript
一个判断抢购时间是否到达的简单的js函数
2014/06/23 Javascript
js实现文章文字大小字号功能完整实例
2014/11/01 Javascript
JS拖拽组件学习使用
2016/01/19 Javascript
javascript的BOM
2016/05/03 Javascript
js获取当前年月日-YYYYmmDD格式的实现代码
2016/06/01 Javascript
jQuery animate easing使用方法图文详解
2016/06/17 Javascript
jQuery中实现prop()函数控制多选框(全选,反选)
2016/08/19 Javascript
jQuery插件easyUI实现通过JS显示Dialog的方法
2016/09/16 Javascript
JavaScript中apply方法的应用技巧小结
2016/09/29 Javascript
angularJS+requireJS实现controller及directive的按需加载示例
2017/02/20 Javascript
jQuery插件echarts设置折线图中折线线条颜色和折线点颜色的方法
2017/03/03 Javascript
在knockoutjs 上自己实现的flux(实例讲解)
2017/12/18 Javascript
以v-model与promise两种方式实现vue弹窗组件
2018/05/21 Javascript
vue做移动端适配最佳解决方案(亲测有效)
2018/09/04 Javascript
详解js 创建对象的几种方法
2019/03/08 Javascript
JS实现盒子拖拽效果
2020/02/06 Javascript
python清除字符串里非字母字符的方法
2015/07/02 Python
Django 5种类型Session使用方法解析
2020/04/29 Python
Python脚本如何在bilibili中查找弹幕发送者
2020/06/04 Python
化工机械应届生求职信
2013/11/04 职场文书
机械系大学毕业生推荐信
2013/11/27 职场文书
群众路线教育党课主持词
2014/04/01 职场文书
创先争优个人承诺书
2014/08/30 职场文书
汽车服务工程专业自荐信
2014/09/02 职场文书
导游词开场白
2015/01/31 职场文书
开工典礼致辞
2015/07/29 职场文书
Python连接Postgres/Mysql/Mongo数据库基本操作大全
2021/06/29 Python