jQuery scrollTop - animation stucks at the end of moving

Question

i use jquery the scrollTop function to get my scrolling smooth while switching between different anchors. first, here is the url

the problem

this is my jquery script

"ziel" is just the german word for "target", just to let you know why this variable is called "ziel"

$(document).ready(function() {
    $('a[href*=#]').bind("click", function(event) {
        event.preventDefault();
        var ziel = $(this).attr("href");

        $('#portraitcontent').animate({
            scrollTop: $(ziel).offset().top
        }, 3000 , function (){location.hash = ziel;});
});
return false;
});

so how do i get a smooth scrolling without that ugly jumping at the end of the animation? any ideas?

i really don't know what to do. spending hours with that bitch!

thanks for your advices!

EDIT

Well with this new code:

$(document).ready(function() {
    $('a[href*=#]').bind("click", function(event) {
        event.preventDefault();
        var ziel = $(this).attr("href");
        $('#portrait-entry').animate({
            scrollTop: $(ziel).offset().top - 230
        }, 1500 , function (){

            if(window.history.replaceState){
                window.history.replaceState(null, document.title, ziel); // <--here
            }
        });
});
return false;
});

smooth scrolling works without ugly jumping BUT for now my anchorlinks don't work the way they should.

please check the problem - when you click on "fortbildungen" and then on "mitgliedschaften", it is not scrolled down to the anchor. i think i have to do reset or s.th. like that, because i think when you are on a #anchor page, the links dont work how they should.

i'm not into js/jquery. so maybe someone could give me a advice. i don't know how to google this kind of problem.

thank you for your help and for the edited code, which made my scrolling smooth.

Answer 1

Finally I decided to delete this scrollTop code and switch to the jQuery.scrollTo plugin in combination with jQuery.localScroll.

Just to let you know

Answer 2

Just because you changed the url in the animate callback cause ugly jumping.

A solution for html5 capable browser is that using "window.history.replaceState" to change url instead of changing url directlly.

The code would like below:

$(document).ready(function() {
    $('a[href*=#]').bind("click", function(event) {
        event.preventDefault();
        var ziel = $(this).attr("href");

        $('#portraitcontent').animate({
            scrollTop: $(ziel).offset().top
        }, 2500 , function (){

            if(window.history.replaceState){
                window.history.replaceState(null, document.title, ziel); // <--here
            }
        });
});
return false;
});