js小效果:返回顶部 scrollTop 。 滚屏:animate

时间:2023-03-08 16:52:32
js小效果:返回顶部 scrollTop 。  滚屏:animate

返回顶部:

(scroll 滚屏事件,如果超出第一屏,显示返回顶部的按钮)

<div id="gotop" onclick="javascript:scroll(0,0);"><img src="data:images/top33x33.png"></div>
<style type="text/css">
#gotop{display:none;position:fixed;right:5px;bottom:4rem;width:33px;height:33px;z-index:999;}
</style>
<script type="text/javascript" src="http://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$(window).scroll(function() {//滚屏
var scrollTop = $(document.body).scrollTop();//滚动高度
var windowH = $(window).height();//页面高度
if(scrollTop>windowH){
$("#gotop").show();
}else{
$("#gotop").hide();
}
});
});
</script>

屏幕滚动到某个像素处:2015-11-18

var scrollTop = $(this).offset().top;
$(document.body).scrollTop(scrollTop-50);

返回顶部、返回页面顶部:  2016-4-22

$('.sidebarnav .sbnl-gotop').click(function(){//回到顶部
$(document.body).animate({scrollTop: '0px'}, 800);
});

侧导航的显示隐藏:(要求,滚屏超过100px后,显示侧导航。初始状态下不显示侧导航)  2016-4-22

/* 侧导航 */
$(window).scroll(function() {//滚屏
var scrollTop = $(document.body).scrollTop();//滚动高度
//var windowH = $(window).height();//页面高度
if(scrollTop>100){
$('.sidebarnav').show();
}else{
$('.sidebarnav').hide();
}
});

..