欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

页面内滚屏处理

程序员文章站 2022-07-13 08:41:18
...

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