Heim  >  Artikel  >  Web-Frontend  >  jquery网页回到顶部效果(图标渐隐,自写)_jquery

jquery网页回到顶部效果(图标渐隐,自写)_jquery

WBOY
WBOYOriginal
2016-05-16 16:44:161143Durchsuche

唔,进来开发需求,当网页内容草鸡多的时候,用户就需要有个按钮快速回到顶部,而不是自己去滚滑轮~

原本以为比较难的说,因为上头要求全部用js来实现,哪个页面引用,哪个页面显示。

于是乎,本屌丝就尝试写了下,唔,没发现,还挺easy的说~~

有屁我就快放了,直接上代码,屁放多了就成屎了~~唔,罪过,阿弥陀佛,阿门~~

复制代码 代码如下:

//回到顶部js <br>$(function(){ <br>var $btn_top = $('<a id="scrollTopBtn"><img  src="css/web/images/scrollTop.png" alt="jquery网页回到顶部效果(图标渐隐,自写)_jquery" ></a>'); <br>$btn_top.css({ <br>'display':'none', <br>'width':'40px', <br>'height':'40px', <br>'position':'fixed', <br>'right':'20px', <br>'bottom':'100px', <br>'z-index':'999' <br>}); <br>$("body").append($btn_top); <br>$("body").on("click","#scrollTopBtn",function(){ <br>$("html,body").animate({scrollTop: 0},"slow"); <br>}); <br>var $btn = $("#scrollTopBtn"); <br>if($(window).scrollTop() > 100){ <br>$btn.fadeIn(600); <br>} <br>$(window).scroll(function(){ <br>if($(window).scrollTop() > 100){ <br>$btn.fadeIn(600); <br>}else{ <br>$btn.fadeOut(600); <br>} <br>}); <br>}); <br>

图片自己找个就好啦,我这里用的是绝对路径“css/web/images/scrollTop.png”

直接在第五行和第六行改下大小即可,这样就避免了页面添加猫标签~~(>^ω^
存成js文件,直接引用,哪疼用哪,谁用谁知道~~~
Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn