Question

我想要实现的是一个简单的滚动功能，它总是滚动到与scrollTop位置相同的点。

我认为使用window.scroll会是一个很好的方法，因为我能够读取当前的scrollTop值，因为我很遗憾它不起作用，在某些浏览器上我无法滚动（IE），在其他浏览器上（Chrome），Firefox）点击连接到此功能的标签后。我得到了自动滚动行为，有点上升，然后有点下降。

我不想使用scrollTo插件或其他因为它是我页面上唯一具有这种功能的地方。

$(window).scroll(function () {
    var y = $(window).scrollTop();
    console.log(y);
    var mainBanner = $('header').height();

    if (y > 1 && y < mainBanner) {
        $('#slideUpHead').click(function(){
        $("html, body").animate({ scrollTop: mainBanner - y}, 600);
        });
    }
    else if(y < 1){
            $('#slideUpHead').click(function(){
        $("html, body").animate({ scrollTop: y + mainBanner}, 600);
            });
    }
    else {

    }


});

这是我的第二种方法，部分工作：

myScroll = function (){

    var mainBannerH = $('header').height();
    var y = $(window).scrollTop();

    if (y > 1 && y < mainBannerH) {
            $("html, body").animate({ scrollTop: mainBannerH - y}, 600);

    }
    else if(y < 1){

            $("html, body").animate({ scrollTop: y + mainBannerH}, 600);

    }
    else {
        console.log("It's not working properly");
    }

};



$('#slideUpHead').click(myScroll);

Answer 1

目前以下解决方案运行得很好，多亏了Ahmad，我已经改变了我的方法并且得到了一点点不同的scrollTop位置，而不是百分之百确定原因，但它有效。

myScrollTo = function (){

    var mainBannerH = $('header').height();
    var myPos = $('html,body').scrollTop();

    if ( myPos > 1 && myPos < mainBannerH) {
            $("html, body").animate({ scrollTop: mainBannerH - myPos}, 600);

    }
    else if(myPos < 1){

            $("html, body").animate({ scrollTop: myPos + mainBannerH}, 600);

    }
    else {
        console.log("It's not working properly");
    }

};



$('#slideUpHead').click(myScrollTo);

滚动功能奇怪的行为

1 个答案: