Jak przewinąć do elementu div (np. # O, # kontakt) po kliknięciu opcji Informacje lub Kontakt w moim menu?Jak przewinąć do elementu div po kliknięciu opcji Informacje lub Kontakt w moim menu?
<div class="masthead">
<ul class="nav nav-pills pull-right">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
<h3 class="muted">Name site</h3>
</div>
HTML:
<div class="masthead">
<ul class="nav nav-pills pull-right">
<li class="active"><a href="#">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
<h3 class="muted">Name site</h3>
</div>
<div id="about">about</div>
<div id="contact">contact</div>
Twój javascript:
$('ul.nav').find('a').click(function(){
var $href = $(this).attr('href');
var $anchor = $('#'+$href).offset();
window.scrollTo($anchor.left,$anchor.top);
return false;
});
Jeśli chcesz użyć ożywione, wymienić
window.scrollTo($anchor.left,$anchor.top);
przez
$('body').animate({ scrollTop: $anchor.top });
Jak dodać animację() do tego kodu? – vavelde
Właśnie edytowałem post z animacją – JohnJohnGa
Pojawił się błąd w mojej konsoli JS, gdy tylko kliknę znacznik zakotwiczenia - Błąd: Błąd składni, nierozpoznane wyrażenie: ## details – plutonium1991
Zobacz ten link. To ma kilka ciekawych funkcji, które działają dobrze
Jest to łatwiejsze niż myślisz.
<div class="masthead">
<ul class="nav nav-pills pull-right">
<li class="active"><a href="#">Home</a></li>
<li><a href="#About">About</a></li>
<li><a href="#Contact">Contact</a></li>
</ul>
<h3 class="muted">Name site</h3>
</div>
<div id="About">Here's my about</div>
...
<div id="Contact">Here's my contact</div>
Używając skrótu, będzie to auto przewijania do elementu o takim identyfikatorze (lub kotwicy z tego atrybutu name). Jeśli chcesz płynnie przewijać, możesz ulepszyć efekt przewijania za pomocą biblioteki javascript, takiej jak jquery. Zobacz na to pytanie: How to scroll HTML page to given anchor using jQuery or Javascript?
Próbowałem. To nie działa dla mnie. Czy jest coś innego niż dostarczanie href = "# id" i posiadanie div z tymi identyfikatorami. –
@SaurabhTiwari Identyfikator musi być unikalny. Element musi istnieć na stronie w momencie ładowania (jeśli chcesz automatycznie przewinąć podczas ładowania) lub po kliknięciu łącza. –
Tak, mam to wszystko na swoim miejscu. Chociaż nie zauważyłem, że używam Angular i routingu w mojej aplikacji. Spójrz [tutaj] (https://stackoverflow.com/questions/44307824/unable-to-scroll-to-a-div-element-using-hash-in-angular-app), jeśli możesz. –
Możesz przeskoczyć do niego z HTML poprzez:
<a href="#tips">Visit the Useful Tips Section</a>
Można to zrobić z CSS poprzez:
Spójrz na http://stackoverflow.com/questions/5284814/jquery-scroll-to- div i http://stackoverflow.com/questions/3432656/scroll-to-a-div-using-jquery – Yoggi
http: //stackoverflow.com/questions/14412157/how-to-scroll-down-the-page-to-view-a-div-in-a-link-clicked/14412200#14412200 –