jQuery Scroll x pixels from top of the page when clicking a link

jquery scroll smooth-scrolling
user1715848 picture user1715848 · Oct 4, 2012 · Viewed 21.3k times · Source

I have a link which changes its vertical position on scrolling. I want to go to a certain postion (smoothly) on my page when I click this link, which is located exactly 1080px from the top of the page.

I can't get it work, hope someone can help me out.

The link:

<img src="img/clickme.png" style="cursor: pointer;" class="scroll"/>

The script:

<script type="text/javascript">
$(document).ready(function() {
$(".scroll").click(function(event){     
$('html, body').animate({scrollTo({ top: '+1080px',}, 800);
});
});
</script>

Answer

Blender picture Blender · Oct 4, 2012

Try this instead. Your syntax was off a little:

$(document).ready(function() {
    $(".scroll").click(function(event){
        $('html, body').animate({scrollTop: '+=1080px'}, 800);
    });
});

Demo: http://jsfiddle.net/m4Aaz/2/

Related questions

jQuery scroll to ID from different page

I was trying to use jQuery's page scroll inside some pages and could successfully make a smooth page scroll. The only problem I have now is when attempting to do that from different page. What I mean by that is …

Read More
How to Set Offsett for Smooth Scroll

I have implemented the CSS Tricks Smooth Page Scroll on my site and it's working pretty nicely. However, because I have a fixed nav at the top of the page, when the page scrolls to the appropriate anchor div, the …

Read More
jQuery scroll to bottom of element not top

I am using the following to scroll to an element $("html, body").animate({ scrollTop: $('selector').offset().top }, 500); The above code places the element at the top of the browser window when scrolled to it, is there a way I can …

Read More