Question

I’ve got a big or maybe small problem. I’m trying to scroll my website, so each container slides to a specific position to the top of the website. But, as far as i can see, there is a problem, because if you click the first item and then the next, the script scrolls to the same position, but if you click on a item above the previous clicked, it scrolls to the bottom of the page.

my script for this is a simple anchorscript, take a look:

$("a.scrollForMe").each(function() {   // go through all links
var href = $(this).attr("href");
if (typeof(href) == "undefined") { return; }
if ($(this).attr("href").match(/^#/)) {   // if href starts with #
    $(this).click(function() {  // add a click event to it
        var name = $(this).attr("href").substring(1);  // get the anchor link

        // on click, scroll to the a with a name attribute matching the anchor
        $('html, body').animate({scrollTop: $("section[name='" + name + "']").offset().top - 420}, 1000);

        //alert ("This height is: " + $("section[name='" + name + "']").height() + " and it's name is " + name);
    });
}
});

If you want to see, how its working at the moment, take a look at my website:
http://1st-issue.de/2012/redaxo/#sec10

i hope you can help me! Thanks in advance!

Answer 1

Probably if you use this code it will be better. I tested on a save page.

$(document).ready(function() {
  $("a.scrollForMe").each(function() {   // go through all links
    var href = $(this).attr("href");
    if (typeof(href) == "undefined") { return; }
    if (href.match(/^#/)) {   // if href starts with #
      $(this).click(function() {  // add a click event to it
        var name = href.substring(1);  // get the anchor link

        // on click, scroll to the a with a name attribute matching the anchor
        $('html, body').animate({scrollTop: $("section[name='" + name + "']").prevAll("section").first().offset().top + 100 }, 1000);

        //alert ("This height is: " + $("section[name='" + name + "']").height() + " and it's name is " + name);
      });
    }
  });
});

If I can give you an advice, you shouldn’t use the href to anchor because the screen jump automatically to the anchor.
With the code code you have added, the screen blinks because the browser go to the corresponding anchor and after execute the scrollTop animation. But it is just an advice.