【问题标题】:ScrollTop with button & scroll with JQuery带有按钮的 ScrollTop 并使用 JQuery 滚动
【发布时间】:2017-08-28 09:31:01
【问题描述】:

我有一个有两个滚动选项的网站。当您向下滚动时,它会滚动到锚点 1。

我还有一个按钮可以跳转到同一个锚点。

我的问题:当我点击按钮时,网站跳转到锚点,但是因为锚点有两种方式,它也触发了第一个滚动选项。

jQuery(document).ready(function($) {
    var flag = true;

    $(window).scroll(function () {
        if (flag == true) {                 
            scroll = $(window).scrollTop(); 
            if (scroll > 50) $('#scroll-down')[0].click();
             flag = false;  
        }                   
    });

    $(window).scroll(function () {
        if (flag == false) {                
            scroll = $(window).scrollTop(); 
            if (scroll < 50 )
             flag = true;  
        }                   
    });     
}); 

有什么解决办法吗?

【问题讨论】:

  • 我能看到的第一件事,你不需要 2 $(window).scroll(function () {}) 因为当你滚动时,两个函数会同时被调用。你可以用一个函数做同样的事情。
  • 您需要将第二个滚动函数的if 部分中的代码放入第一个滚动函数的else 部分

标签: javascript jquery scroll anchor scrolltop


【解决方案1】:

从您发送的截屏视频中,单击按钮时,此代码应滚动到横幅底部(前提是您正确放置了锚 div):

    jQuery(document).ready(function ($) {

        // The button is assumed to have an id of 'scroll-down' - triggered when clicked
        $('#scroll-down').on('click', function () {

            // Move to the pre-defined anchor point
            // Insert <div id="scroll-down-anchor"></div> to where you want to scroll to
            $('html, body').animate({

                scrollTop: $('[id=scroll-down-anchor]').position().top

                // Set the speed of the scroll here (currently set to 1000 ms)
            }, 1000);

        });

    });

我仍然不确定从截屏视频中您想根据滚动窗口时的窗口位置来处理行为。

更新:根据截屏视频和更多信息。 代码已经更新,但是,尽管我认为这是您的代码试图实现的目标,但我认为效果根本不是很好,因为您正在拦截用户的意图,劫持它并做出某些事情不同的发生。它也非常不稳定,要改进它可能需要更多的代码行(例如,确定现有滚动的速度,拦截它并使其有机地加速 - 远远超出了这种答案的范围)。也许有一个插件可以很好地做到这一点。

无论如何,我认为这段代码完成了您想要实现的目标,但最终效果虽然是主观的,但在我看来并不是很好。我已经添加了解释性 cmets:

     jQuery(document).ready(function ($) {

        // Variable to store scrolling state
        var scrolling = false;
        // Variable to store position to determine whether scrolling up or scrolling down
        var previousScroll = 0;

        $(window).scroll(function () {
            // Only is state is not 'scrolling' (ie not to run if button has been clicked)
            if (scrolling === false) {
                // Get position
                var currentScroll = $(this).scrollTop();
                // Compare position to stored variable: scrolling up or scrolling down
                if (currentScroll > previousScroll) {
                    // Determine if position is 'within the zone' - set here to 50px
                    if (currentScroll < 50 && currentScroll !== 0) {
                        console.log('IN ZONE');
                        // Trigger button click
                        $('#scroll-down').trigger('click');
                    } else {
                        // Normal scrolling down code, outside zone
                        console.log('SCROLLING DOWN ');
                    }
                }
                else {
                    // Scrolling up code
                    console.log('SCROLLING UP ');
                }
                // Set variable for comparison of next scroll event
                previousScroll = currentScroll;
            }

        });

        // The button is assumed to have an id of 'scroll-down' - triggered when clicked
        $('#scroll-down').on('click', function () {
            // Set the scrolling state
            scrolling = true;
            // Animate with callback to set scrolling back to 'true' when complete
            $('html, body').animate({ scrollTop: $('[id=scroll-down-anchor]').position().top }, 1000, function () {
                // Callback code - set scrolling state to be false when animation has finished
                scrolling = false;

            });
        });

    });

【讨论】:

  • 现在的问题是鼠标滚动没有跳转到锚点。
  • 是的 - 这是我不明白你想要达到的目标。如果你能用语言描述应该发生的事情,那应该是相当简单的。窗口滚动时会发生什么?
  • 好吧:当你向下滚动时,只是一点点,比如 50px。当我点击按钮时,网站必须跳转到同一个锚点。在我制作的截屏视频中,第一次我只是将鼠标向下滚动 50 px,然后它跳到了锚点。
  • 好的,我明白了——不过我现在必须做其他事情
  • 我已经更新了答案,希望能满足您在问题中想要达到的目标。
猜你喜欢
  • 2010-12-23
  • 2011-06-01
  • 1970-01-01
  • 1970-01-01
  • 2016-06-02
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2012-07-31
相关资源
最近更新 更多