Animacja przewijania do identyfikatora przy ładowaniu strony

Question

Edycja animacji przewijania do określonego identyfikatora podczas ładowania strony. Zrobiłem wiele badań i natknąłem się na to:

$("html, body").animate({ scrollTop: $('#title1').height() }, 1000); 

ale to wydaje się zaczynać od identyfikatora i animować na górze strony?

HTML (który jest w połowie drogi w dół strony) jest po prostu:

<h2 id="title1">Title here</h2> 

Answer 1

Jesteś tylko przewijanie wysokość swojego elementu. offset() zwraca współrzędne elementu w stosunku do dokumentu, a top param daje odległość między elementu w pikselach wzdłuż osi y:

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

Można także dodać opóźnienie do niego:

$("html, body").delay(2000).animate({scrollTop: $('#title1').offset().top }, 2000); 

Answer 2

Istnieje wtyczka jquery do tego. Przewija dokument do określonego elementu, dzięki czemu będzie idealnie widoczny w środku rzutni. Obsługuje także animacje, dzięki czemu efekt przewijania będzie wyglądał bardzo gładko. Sprawdź this link.

W twoim przypadku kod jest

$("#title1").animatedScroll({easing: "easeOutExpo"}); 

Answer 3

$(jQuery.browser.webkit ? "body": "html").animate({ scrollTop: $('#title1').offset().top }, 1000); 

jquery-animate-body-for-all-browsers.

Answer 4

spróbuj z następującym kodem. tworzyć elementy z nazwą klasy strona-przewijać i zachować nazwę id do href z odpowiednimi linkami

$('a.page-scroll').bind('click', function(event) { 
     var $anchor = $(this); 
     $('html, body').stop().animate({ 
      scrollTop: ($($anchor.attr('href')).offset().top - 50) 
     }, 1250, 'easeInOutExpo'); 
     event.preventDefault(); 
    }); 

Answer 5

Czysta javascript rozwiązanie z scrollIntoView() funkcji:

document.getElementById('title1').scrollIntoView({block: 'start', behavior: 'smooth'});

<h2 id="title1">Some title</h2>

PS: "gładki" parametr działa teraz z Chrome 61 jako julien_c wspomniano w komentarzach.