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

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();
    }
});

 

 

..

 

posted on 2015-11-13 11:42 bjhhh 阅读( ...) 评论( ...) 编辑 收藏

转载于:https://www.cnblogs.com/qq21270/p/4961686.html