ScrollTop with button & scroll with JQuery

Question

I have a website with two scroll options. When you scroll down, it scrolls to the anchor Point 1.

I also have a Button which jumps to the same anchor point.

My problem: When I click the Button, the site jumps to the Anchor, but because there are two ways to the anchor, it triggers the first scroll option as well.

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

Any solutions for this ?

Answer 1

From the screencast you sent, this code should scroll to the bottom of the banner when the button is clicked (provided you correctly place the anchor 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);

        });

    });

I'm still not sure from the screencast what you want to do with the behaviour based on the window position when the window is scrolled.

UPDATE: In light of the screencast and further information. The code has been updated, BUT, although this is, I think, what your code was trying to achieve, I don't think the effect is very nice at all because you're intercepting a user's intention, hijacking it, and making something different happen. It's also very choppy, and to improve that would probably take many more lines of code (eg to determine speed of existing scroll, intercept that and make it accelerate organically - way beyond the scope of this kind of answer). Maybe there's a plugin out there to do this nicely.

Anyway, I think this code completes what you were trying to achieve, but the end effect, although subjective, is not very nice in my opinion. I've put in explanatory comments:

     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;

            });
        });

    });