时间:2021-05-25
使用jQuery实现。所用图片:
1、尝试滚动 此页面到底部即可出现go2top按钮。
2、go2top-inner暂未使用。
HTML&JS定义:
复制代码 代码如下:
<a id="go2top" class="go2top" href="#header"><span class="go2top-inner"></span></a>
<script type="text/javascript">
$(function(){
$('#go2top').click(function(){
$("html,body").animate({scrollTop:0},200);
return false;
});
$(window).scroll(function(){
var obj=$('#go2top');
if(obj.offset().top>900){
obj.show();
}else{
obj.hide();
}
});
});
</script>
CSS定义
复制代码 代码如下:
.go2top {
background: url("http://images.cnitblog.com/blog/84698/201303/28125209-67653841b1114531a2a1e6db63315d63.png") no-repeat scroll left top transparent;
bottom: 65px;
color: #444444;
display: none;
height: 50px;
margin-left: 510px;
position: fixed;
right: 160px;
text-align: center;
width: 50px;
}
.go2top:hover {
background-position: -50px top;
}
试试看,是不是有了返回顶部了,非常方便实用的功能,希望大家能够喜欢。
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
很多网站上都有返回顶部的效果,本文阐述如何使用jquery实现返回顶部按钮。首先需要在顶部添加如下html元素:返回顶部其中a标签指向锚点top,可以在顶部防止
很多网站上都有返回顶部的效果,本文阐述如何使用jquery实现返回顶部按钮。首先需要在顶部添加如下html元素:返回顶部其中a标签指向锚点top,可以在顶部防止
jquery12个常用功能极好的,快来围观!返回顶部使用JQuery的animate和scrollTop方法可以创建简单地返回顶部的动画://Backtotop
本文实例为大家分享了jquery实现返回顶部效果的全部代码,供大家参考,具体内容如下效果图:实现代码:返回顶部*{margin:0;padding:0;}.wr
使用方法:只需引用jQuery库和YesTop插件,然后一句代码就可以实现返回顶部:引用代码:使用代码:$(document).ready(function()