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 02 Javascript
基于jquery的不规则矩形的排列实现代码
Apr 16 Javascript
jQuery实现点击小图显示大图代码分享
Aug 25 Javascript
Bootstrap中的Panel和Table全面解析
Jun 13 Javascript
domReady的实现案例
Nov 23 Javascript
mpvue 如何使用腾讯视频插件的方法
Jul 16 Javascript
使用webpack将ES6转化ES5的实现方法
Oct 13 Javascript
Echarts实现单条折线可拖拽效果
Dec 19 Javascript
详解微信小程序之提高应用速度小技巧
Jan 07 Javascript
JS实现盒子拖拽效果
Feb 06 Javascript
详解Vue的mixin策略
Nov 19 Vue.js
vue+element_ui上传文件,并传递额外参数操作
Dec 05 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
使用PHP生成二维码的方法汇总
2015/07/22 PHP
Yii2.0高级框架数据库增删改查的一些操作
2015/11/16 PHP
详解Yii2 之 生成 URL 的方法
2017/06/16 PHP
[原创]PHP实现字节数Byte转换为KB、MB、GB、TB的方法
2017/08/31 PHP
php文件操作之文件写入字符串、数组的方法分析
2019/04/15 PHP
一段批量给页面上的控件赋值js
2010/06/19 Javascript
js生成缩略图后上传并利用canvas重绘
2014/05/15 Javascript
《JavaScript函数式编程》读后感
2015/08/07 Javascript
JavaScript中字面量与函数的基本使用知识
2015/10/20 Javascript
javascript针对不确定函数的执行方法
2015/12/16 Javascript
基于JavaScript实现添加到购物车效果附源码下载
2016/08/22 Javascript
node+express制作爬虫教程
2016/11/11 Javascript
js按条件生成随机json:randomjson实现方法
2017/04/07 Javascript
vue获取dom元素注意事项
2017/12/28 Javascript
简单说说如何使用vue-router插件的方法
2019/04/08 Javascript
jQuery zTree树插件的使用教程
2019/08/16 jQuery
JS在Array数组中按指定位置删除或添加元素对象方法示例
2019/11/19 Javascript
[01:01:23]完美世界DOTA2联赛PWL S2 Forest vs FTD.C 第一场 11.26
2020/11/30 DOTA
python分割和拼接字符串
2013/11/01 Python
Django + Uwsgi + Nginx 实现生产环境部署的方法
2018/06/20 Python
浅谈Pandas:Series和DataFrame间的算术元素
2018/12/22 Python
python实现微信防撤回神器
2019/04/29 Python
使用Python检测文章抄袭及去重算法原理解析
2019/06/14 Python
python requests指定出口ip的例子
2019/07/25 Python
Python解析命令行读取参数之argparse模块
2019/07/26 Python
Python with关键字,上下文管理器,@contextmanager文件操作示例
2019/10/17 Python
基于Python正确读取资源文件
2020/09/14 Python
投资建议书模板
2014/05/12 职场文书
阅兵口号
2014/06/19 职场文书
幼儿园教师的自我评价范文
2014/09/17 职场文书
党的群众路线教育实践活动党员个人剖析材料
2014/10/08 职场文书
政风行风评议个人心得体会
2014/10/29 职场文书
2016年圣诞节寄语(一句话)
2015/12/07 职场文书
导游经典开场白——导游词
2019/04/17 职场文书
创业计划书之餐饮
2019/09/02 职场文书
世界十大狙击步枪排行榜
2022/03/20 杂记