jQuery scrollTop - анимация застревает в конце движения

Question

Я использую jquery функцию scrollTop, чтобы сделать прокрутку плавной при переключении между разными якорями. во-первых, вот URL

эта проблема

это мой скрипт jquery

"ziel" - это просто немецкое слово для "target", просто чтобы вы знали, почему эта переменная называется "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;
});

так как мне получить плавную прокрутку без этого уродливого прыжка в конце анимации? есть идеи?

Я действительно не знаю, что делать. проводить часы с этой сукой!

спасибо за ваши советы!

РЕДАКТИРОВАТЬ

Хорошо с этим новым кодом:

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

плавная прокрутка работает без уродливых прыжков,НО пока мои ссылки не работают так, как должны.

пожалуйста, проверьте проблему - когда вы нажимаете "fortbildungen", а затем "mitgliedschaften", он не прокручивается до якоря. я думаю, что я должен сделать сброс или s.th. вот так, потому что я думаю, что когда вы находитесь на странице #anchor, ссылки не работают так, как должны.

Я не в JS / JQuery. так что, возможно, кто-то может дать мне совет. я не знаю, как погуглить такого рода проблемы.

спасибо за вашу помощь и за отредактированный код, который сделал мою прокрутку гладкой.

Answer 1

Наконец я решил удалить этот код scrollTop и переключиться на плагин jQuery.scrollTo в сочетании с jQuery.localScroll.

Просто чтобы вы знали

Answer 2

Просто потому, что вы изменили URL-адрес в анимированном обратном вызове, вы получите уродливый прыжок.

Решение для браузера с поддержкой html5 заключается в том, чтобы использовать "window.history.replaceState" для изменения URL-адреса вместо непосредственного изменения URL-адреса.

Код хотел бы ниже:

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