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

返回顶部:

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

<div id="gotop" onclick="javascript:scroll(0,0);"><img src="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();
    }
});

..

原文地址:https://www.cnblogs.com/qq21270/p/4961686.html