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

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

文章来源:365jz.com     点击数:423    更新时间: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>

如对本文有疑问,请提交到交流论坛,广大热心网友会为你解答!! 点击进入论坛


发表评论 (423人查看0条评论)
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
用户名: 验证码: 点击我更换图片
最新评论
------分隔线----------------------------