CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Anthony Carbon
Anthony Carbon

Reputation: 618

jQuery scroll does not scroll up

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.

Upvotes: 1

Views: 94

Answers (5)

svasuvelu
svasuvelu

Reputation: 51

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.

Upvotes: 0

Anthony Carbon
Anthony Carbon

Reputation: 618

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

Upvotes: 0

Erikk Ross
Erikk Ross

Reputation: 2183

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

    });
});

Upvotes: 2

Erikk Ross
Erikk Ross

Reputation: 2183

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

Upvotes: 1

James George Dunn
James George Dunn

Reputation: 523

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

Upvotes: 1

Related Questions