1

I´m working on a responsive wordpress site where on small screens(mobile) I want to scroll to #content when a menu-item is clicked as the menu takes up most of the screenspace. I´ve tried these script but didn´t work.

1

$("#access a").click(function() {
$("#goto").animate({scrollTop: $("#goto").offset().top});
});

2

$("html, body").animate({ scrollTop: $('#goto').offset().top }, 1000);

Is there a simple solution for this?

user1875530
  • 19
  • 2

1 Answers1

0

I answered a similar question a while back here, which worked great.

Based on that answer, try this:

$(function() {
var scrollElement = '#content';
var destination = $(scrollElement).offset().top;
$("#access a").click(function() {
    $(scrollElement).offset().top;
    $("html:not(:animated),body:not(:animated)").animate({
        scrollTop: destination-75 }, 800 );
    });
});​

Note, the number 75 can be tweaked to get the page to scroll exactly where you want it to.

Community
  • 1
  • 1
ReLeaf
  • 1,368
  • 1
  • 10
  • 17
  • Thanks! But it didn´t work. Would it be easier to force a scroll to content on page load? – user1875530 Dec 05 '12 at 07:39
  • Sorry, I had a mistake in there but I fixed it. It works now. Here's a jsFiddle that demonstrates it: http://jsfiddle.net/E5bLP/8/ – ReLeaf Dec 05 '12 at 15:09