您现在的位置： 365建站网 > 365文章 > 用jquery实现当页面滑动到一定高度后,出现顶置按钮的代码

用jquery实现当页面滑动到一定高度后,出现顶置按钮的代码

文章来源：365jz.com 点击数：510 更新时间：2018-03-23 23:53 参与评论

使用的技术是JQuery的方法

1,$(window).scroll() //当我们操作页面滚动时,会触发该方法 ,该方法内执行一个函数

2,$(window).scrollTop() //可以获取滚动条的垂直位置

实例一：

<div class="gotop center">
<a href="#top" class="index-fanhui">
<div>返回顶部</div>
</a>
</div>

$(window).scroll(function(){

$(this).scrollTop()>500?$(".gotop .index-fanhui").removeClass("yinchang").fadeIn():$(".gotop .index-fanhui").addClass("yinchang").fadeOut();

})

实例二：

jquery操作滚动条滚动到指定位置

$("html,body").animate({scrollTop:$("#qy_name").offset().top},1000);//1000是ms,也可以用slow代替

实例三：

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>365建站-365jz.com</title>
<style>
.panel{overflow:hidden;width:100%;height:1000px;}
#return-top{position:fixed;bottom:10%;right:50px; width:60px;height:60px;background-color:#eee; text-align:center; display:none;}
#return-top a{text-decoration:none; }

</style>
<script src="js/jquery-1.8.3.min.js"></script>
</head>

<body>
<div class="panel" style="background-color:red;"></div>
<div class="panel" style="background-color:blue;"></div>
<div class="panel" style="background-color:yellow;"></div>
<div id="return-top"><a href="#">返回顶部</a></div>
<script>
$(function(){
$('#return-top').hide();
$(function(){
$(window).scroll(function(){
   if($(window).scrollTop()>300){
    $('#return-top').fadeIn(300);
    }
    else{$('#return-top').fadeOut(200);}

   });
   $('#return-top').click(function(){

    $('body,html').animate({scrollTop:0},300);
    return false;

    })

})

})
</script>
</body>
</html>