页面内滚屏处理

最新推荐文章于 2021-10-25 11:20:16 发布

iteye_16828

最新推荐文章于 2021-10-25 11:20:16 发布

阅读量154

点赞数

分类专栏： javascript 文章标签： animate scrollTop position:fixed

javascript 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

1：obj为id号

/**
    *页面滚动到指定位置
    */
    function goTotop(obj){
        var _targetTop = $('#'+obj).offset().top;//获取位置
        $("html,body").animate({scrollTop:_targetTop},300);//跳转 300毫秒
    }

2：固定图层，页面滚动到顶部

#backTop{
    width:40px;
    height:40px;
    position:fixed;//固定图层

    z-index:9999999; //图层置于顶层（足够大）
    right:10px;
    bottom:300px;
    display:none;
    border-radius:3px;//圆角
    background:url(../images/backTop.png) 0 0 no-repeat;
    cursor:pointer;
}

$(function() {
if ($.browser.msie && ($.browser.version == "6.0") && !$.support.style) {
} else{
    $("body").append('<div id="backTop"></div>');

    $(window).scroll(function(){
        if ($(window).scrollTop()>100){//滚动100px时，出现
            $("#backTop").fadeIn(400);
        }else{
            $("#backTop").fadeOut(400).hide();
        }
    });

    $("#backTop").click(function(){
        $('body,html').animate({scrollTop:0},200);
        return false;
    });

}
});

注意：同理如果要让某个图层居顶显示（不管滚动条如何滚动），可以加

.navWrapFix{ position:fixed; top:0; left:0; width:100%; z-index:1999; background:#fff;opacity:0.9;filter:alpha(opacity=90); border-bottom:1px solid #f1f1f1;box-shadow:0 0 3px #ccc;}