jQuery回到顶部的代码_

《jQuery回到顶部的代码_》由会员上传分享，免费在线阅读，更多相关内容在应用文档-天天文库。

1、jQuery回到顶部的代码_在一些网站上，我们常常见到返回顶部的效果，本文给大家介绍基于jquery如何实现返回顶部效果。感爱好的伴侣跟着我一起看下实现代码吧。首先需要在顶部添加如下html元素：pid="back-to-top"ahref="#top"span/span返回顶部/a/p其中a标签指向锚点top，可以在顶部防止一个aname="top"/a的锚点，这样在扫瞄器不支持js时也可以实现返回顶部的效果了。要想让返回顶部的图片显示在右侧，还需要一些css样式，如下：/*returnTop*/p#back-to-top{posit

2、ion:fixed;display:none;bottom:100px;right:80px;}p#back-to-topa{text-align:center;text-decoration:none;color:#d1d1d1;display:block;width:64px;/*用法CSS3中的transition属性给跳转链接中的文字添加渐变效果*/-moz-transition:color1s;-webkit-transition:color1s;-o-transition:color1s;}p#back-to-topa:ho

3、ver{color:#979797;}p#back-to-topaspan{background:transparenturl(/static/imgs/sprite.png?1202)no-repeat-25px-290px;border-radius:6px;display:block;height:64px;width:56px;margin-bottom:5px;/*用法CSS3中的transition属性给span标签背景颜色添加渐变效果*/-moz-transition:background1s;-webkit-transi

4、tion:background1s;-o-transition:background1s;}#back-to-topa:hoverspan{background:transparenturl(/static/imgs/sprite.png?1202)no-repeat-25px-290px;}上面样式中的背景图片是雪碧图，下面供应两个单独的返回顶部图片便利伴侣们用法：有了html和样式，我们还需要用js掌握返回顶部按钮，在页面滚动时渐隐渐现返回顶部按钮。scriptsrc="l').animate({scrollTop:0},1000)

5、;returnfalse;});});});/script这样就可以了。留意在载入页面后需要向下拖动一点滚动条才可以看到返回顶部的效果图。下面在给大家分享一段jquery回到顶部代码1.页面内容较多，从底部超链接点击回到页面顶部//回到顶部var$top=$('aclass="doc-gotop"href="javascript:;"TOP/a').on('click',function(){$(window).scrollTop(0);returnfalse;});$('body').append($top);...