自写jquery网页回到顶部效果,渐隐图标,引用js文件就可以
2015-12-30 11:15
330 查看
唔。进来开发需求,当网页内容草鸡多的时候,用户就须要有个button高速回到顶部,而不是自己去滚滑轮~
原本以为比較难的说,由于上头要求所实用js来实现,哪个页面引用,哪个页面显示。
于是乎,本屌丝就尝试写了下。唔,没发现,还挺easy的说~~
有屁我就快放了,直接上代码,屁放多了就成屎了~~唔,罪过,阿弥陀佛,阿门~~
图片自己找个就好啦,我这里用的是绝对路径“css/web/images/scrollTop.png”
直接在第五行和第六行改下大小就可以,这样就避免了页面加入猫标签~~(>^ω^<)喵~~~
存成js文件,直接引用,哪疼用哪,谁用谁知道~~~
有交流请加QQ:1740437,欢迎不吝赐教~~
另寻求传说中的古风爱好小伙伴,以及民乐爱好小伙伴,或者拍摄视频微电影小伙伴~~
原本以为比較难的说,由于上头要求所实用js来实现,哪个页面引用,哪个页面显示。
于是乎,本屌丝就尝试写了下。唔,没发现,还挺easy的说~~
有屁我就快放了,直接上代码,屁放多了就成屎了~~唔,罪过,阿弥陀佛,阿门~~
<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文件,直接引用,哪疼用哪,谁用谁知道~~~
有交流请加QQ:1740437,欢迎不吝赐教~~
另寻求传说中的古风爱好小伙伴,以及民乐爱好小伙伴,或者拍摄视频微电影小伙伴~~
相关文章推荐
- jQuery源码分析15--迭代器
- HTML5中类jQuery选择器querySelector的使用
- jQuery源码分析14--get与eq的区别
- noConflict() 方法处理jQuery 命名冲突
- 分享两款带遮罩的jQuery弹出框
- Jquery轮播图制作
- jQuery源码分析13--仿栈与队列的操作(数组的操作)
- 前端(js/jquery) 日期和时间戳的转换
- jQuery拖动元素并对元素进行重新排序
- jquery mobile常用类型参数
- jQuery给元素添加样式的方法详解
- jquery.SuperSlide
- OpenLayers学习笔记4——使用jQuery UI实现測量对话框
- jQuery与Servlet实现文件上传与获取上传进度
- JQuery 选择器
- jquery.reveal弹出框
- 用户登录成功后的信息初始化及持久连接安全机制---php+json+jquery
- Jquery 函数扩展
- jQuery插件
- jQuery给元素添加样式的方法详解