jQuery scroll does not scroll up

Question

I have this code below and the DEMO fiddle.

jQuery(document).ready(function () {
    $(window).scroll(function () {
        $('html, body').animate({
            scrollTop: $('#content').offset().top
        }, 1000);
    });
});

I'm really confused why I can't scroll up? Anybody can explain to me why and please share some solutions you have.

Any help, is very appreciated.

Can you explain what are you aiming to do? furthermore your HTML code is full of mistakes :"< sselect"[...]. — Sarcadass
– Sarcadass, Commented Feb 5, 2015 at 13:07
Every time you try to scroll, the $(window).scroll() event fires, and automatically animates your scroll top $('#content').offset().top (which is always the same value). So whenever you try to scroll up, it just animates your page scroll back down. — Praxis Ashelin
– Praxis Ashelin, Commented Feb 5, 2015 at 13:09
Updated sir. http://jsfiddle.net/anthonypagaycarbon/0svz4331/1/. I want the scroll works perfect. — Anthony Carbon
– Anthony Carbon, Commented Feb 5, 2015 at 13:10

Erikk Ross · Accepted Answer · 2015-02-05 13:59:56Z

2

Alright, this should do what you are asking for. I don't think it is very user friendly, but that is up to you.

Demo Fiddle

//this prevents the animate method from running multiple times. 
var scrolling = false;    

jQuery(document).ready(function () {
    $(window).scroll(function () {
        if ( $(window).scrollTop() <= 100 && scrolling === false) {
            //set to true to prevent multiple scrolls
            scrolling = true; 

            //run the animation 
            $('html, body').animate({
                scrollTop: $('#content').offset().top
            }, 1000, function() {
                //when animation is complete, set scrolling to false
                scrolling = false; 
            });
        }

    });
});

answered Feb 5, 2015 at 13:59

Erikk Ross

2,18314 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Anthony Carbon Over a year ago

You did a good job sir Erikk Ross. Many thanks .. I'll study the version of yours sir. Thanks a lot.

James George Dunn · Accepted Answer · 2015-02-05 13:10:26Z

1

You can't scroll up because your code is wrapped in the scroll() function so it basically locks its position every time you try and scroll with either the mouses scroll wheel or arrow keys. If you amend to the following then it will position itself accordingly when the page first loads.

jQuery(document).ready(function () {
    $('html, body').animate({
        scrollTop: $('#content').offset().top
    }, 1000);
});

answered Feb 5, 2015 at 13:10

James George Dunn

5232 gold badges6 silver badges16 bronze badges

3 Comments

Anthony Carbon Over a year ago

Thanks for the explanation sir. I thinking about if I'm on the header and I scrolled down, it goes directly to the content div and after that, I'm free to scroll up without animation involve, then if I reach the header and I scrolled down again, the animation will be activate again. Is it posible sir?

Praxis Ashelin Over a year ago

@AnthonyCarbon yes, simply do a check for the current window scroll position before activating the animation

Anthony Carbon Over a year ago

How could I do that sir ? Can you give me a sample just like I have on fiddle ?

Erikk Ross · Accepted Answer · 2015-02-05 13:14:41Z

1

Are you trying to have it animate when the link is clicked? If so you need to change your code:

 jQuery(document).ready(function () {
        $('a').click(function () {
            $('html, body').animate({
                scrollTop: $('#content').offset().top
            }, 1000);
        });
    });

I would probably add a class or ID value to your link so you can target that one specific link. The code above would apply to all links on your page...although right now there is only the one.

<h1><a href="#content" class="scrollToContent">Scroll to the Content</a></h1>

 jQuery(document).ready(function () {
        $('.scrollToContent').click(function () {
            $('html, body').animate({
                scrollTop: $('#content').offset().top
            }, 1000);
        });
    });

answered Feb 5, 2015 at 13:14

Erikk Ross

2,18314 silver badges18 bronze badges

3 Comments

Anthony Carbon Over a year ago

I thinking about if I'm on the header and I scrolled down, it goes directly to the content div and after that, I'm free to scroll up without animation involve, then if I reach the header and I scrolled down again, the animation will be activate again. Is it posible sir?

Erikk Ross Over a year ago

Hmmm, I don't think that would make sense. If you are on the header and scroll down you want it to skip all of the content between the link and the Content header? Wouldn't it make more sense to click the link and have it animate to the content section. That is exactly what the code above does. Here is a fork of your fiddle showing it in action: jsfiddle.net/gxrh570h

Anthony Carbon Over a year ago

I already did this, but I was wondering if how to apply my idea even if it is not user friendly. I just want to know how to stop putting me when I'm about to scroll up.

Anthony Carbon · Accepted Answer · 2015-02-05 14:03:06Z

0

I'm not sure if you will satisfied on this but i found something that can help a little on my problem.

jQuery(document).ready(function () { 
    $(this).bind('mousewheel', function(e){
        if(e.originalEvent.wheelDelta /120 < 1) { 
            $('html, body').delay(200).animate({
                scrollTop: $('#content').offset().top
            }, 1000);
        }
    }); 
});

DEMO

answered Feb 5, 2015 at 14:03

Anthony Carbon

6181 gold badge6 silver badges18 bronze badges

Comments

svasuvelu · Accepted Answer · 2015-02-05 14:09:29Z

0

No need to add the jquery functionality to achieve the requirement that has been asked. Please remove the Jquery code and run the code snippet provided in the fiddle. It is behaving as per the requirement.

answered Feb 5, 2015 at 14:09

svasuvelu

512 bronze badges

Collectives™ on Stack Overflow

jQuery scroll does not scroll up

5 Answers 5

1 Comment

3 Comments

3 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

1 Comment

3 Comments

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related