Cách cuộn đến div (ví dụ: #about, #contact) sau khi nhấp vào Giới thiệu hoặc Liên hệ trong trình đơn của tôi?Cách cuộn đến div sau khi nhấp vào Giới thiệu hoặc Liên hệ trong trình đơn của tôi?
<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 của bạn:
<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>
javascript của bạn:
$('ul.nav').find('a').click(function(){
var $href = $(this).attr('href');
var $anchor = $('#'+$href).offset();
window.scrollTo($anchor.left,$anchor.top);
return false;
});
Nếu bạn muốn sử dụng Animate, thay thế
window.scrollTo($anchor.left,$anchor.top);
bởi
$('body').animate({ scrollTop: $anchor.top });
Cách thêm animate() vào mã này? – vavelde
Tôi vừa chỉnh sửa bài đăng với animate – JohnJohnGa
Tôi gặp lỗi trong bảng điều khiển JS ngay khi tôi nhấp vào thẻ neo- Lỗi: Lỗi cú pháp, biểu thức không được công nhận: ## details – plutonium1991
Nhìn vào liên kết này. Nó có một vài chức năng tốt đẹp mà làm việc tốt
Nó là dễ dàng hơn bạn nghĩ.
<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>
Bằng cách sử dụng hàm băm, nó sẽ tự động cuộn đến một phần tử có id đó (hoặc neo với thuộc tính name). Nếu bạn muốn nó cuộn trơn tru, bạn có thể nâng cao hiệu ứng cuộn với thư viện javascript, như jquery. Xem câu hỏi này: How to scroll HTML page to given anchor using jQuery or Javascript?
Tôi đã thử nó. Điều này không hiệu quả với tôi. Có cái gì khác hơn là cung cấp href = "# id" và có divs với các id. –
@SaurabhTiwari ID phải là duy nhất. Và phần tử phải tồn tại trên trang tại thời điểm tải (nếu bạn muốn tự động cuộn khi tải) hoặc khi bạn nhấp vào liên kết. –
vâng, tôi có mọi thứ tại chỗ. Mặc dù tôi đã đề cập đến việc tôi đang sử dụng Angular và định tuyến trong ứng dụng của mình. Có một cái nhìn [ở đây] (https://stackoverflow.com/questions/44307824/unable-to-scroll-to-a-div-element-using-hash-in-angular-app) nếu bạn có thể. –
Bạn có thể nhảy đến nó với HTML qua:
<a href="#tips">Visit the Useful Tips Section</a>
Bạn có thể làm điều đó với CSS qua:
Nhìn vào http://stackoverflow.com/questions/5284814/jquery-scroll-to- div và 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 –