作者:有些事想不到 | 来源:互联网 | 2023-01-30 02:48
JQuery点击事件回到页面顶部效果 最常见的返回顶部大多是用js或者jQuery写出来的,但也有少部分直接用的HTML锚点实现的,自我感觉还是jQuery比较简便,效果也更好。所
JQuery点击事件回到页面顶部效果
最常见的返回顶部大多是用 js 或者 jQuery写出来的,但也有少部分直接用的 HTML 锚点实现的,自我感觉还是jQuery比较简便,效果也更好。所以,下面用 jQuery 写一个简单常用的返回顶部效果。
首先我们来完成HTML的简单网页代码:
<a class="gotop" href="Javascript:;">
<i class="iconfont icon-fanhuidingbu3 right-icon">i>
a>
然后是jQuery的关键代码:
<script src="js/jquery-3.2.1.min.js">script>
<script>
$(function() {
$(".gotop").hide();
$(window).bind('scroll',function(){
if($(window).scrollTop()<=300){
$(".gotop").hide();
}else{
$(".gotop").show();
}
});
$(".gotop").bind("click",function(){
$('html, body').animate({scrollTop: 0},300);
});
});
script>
其实方法多种多样,只要能针对当下的问题得以最好的解决就是好方法。