Tôi muốn cuộn trang lên đầu trang, ví dụ: ID div điều hướng khi nhấp vào bất kỳ liên kết nào trong ID div điều hướng hoặc (nếu có thể) khi nhấp vào bất kỳ đâu vào chính ID div chứa các liên kết điều hướng.Cuộn phần tử lên đầu trang bằng cách nhấp vào neo bên trong phần tử hoặc bất kỳ vị trí nào bên trong có chứa id div
Tôi đã nghiên cứu điều này và gần nhất tôi đã đến là jQuery - How to scroll an anchor to the top of the page when clicked? tuy nhiên vì một lý do nào đó dường như nó không hoạt động khi tôi cố gắng làm điều này trong ví dụ của tôi. Tôi đang làm gì sai?
Tôi mới sử dụng jQuery và vừa ở dạng html và css (và đã sử dụng kiểu dáng nội tuyến của các div vì tôi không muốn cung cấp một css riêng cho ví dụ này).
Khi tôi tải html và tập lệnh từ jQuery - How to scroll an anchor to the top of the page when clicked? trong Aptana, nó cũng không cuộn. Ngay cả với một div nội dung trên lớp div làm việc để có không gian để di chuyển đến ở tất cả.
Tôi đã bao gồm hai đoạn nhỏ bên trong các div liên quan để giải thích chính xác những gì tôi có ý nghĩa.
Mọi trợ giúp đều được đánh giá cao. Cảm ơn bạn.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
$('#scroll_navigation ul li').click(function() {
$('html,body').animate({scrollTop: $(this).offset().top}, 800);
});
</script>
<body>
<div id="logo" style="margin: 0 auto; height: 300px; width: 60%; border: 1px solid #000">Logo</div>
<div id="scroll_navigation" style="margin: 0 auto; width: 40%; border: 4px solid #225599">
<p>Scroll navigation to top of page</p>
<p>Catch any clicks in "#scroll_navigation" to scroll the div id to the top of the page</p>
<div id="navigation">
<div class="container" style="margin: 0 auto; height: 220px; width: 60%; border: 1px solid #000">
<ul>
<p>Catch clicks on anchors to scroll the div id to the top of the page</p>
<li><a href="#Portfolio" title="">Portfolio</a></li>
<li><a href="#Services" title="">Services</a></li>
<li><a href="#About" title="">About</a></li>
<li><a href="#Contact" title="">Contact</a></li>
</ul>
</div>
</div>
</div>
<div id="content" style="margin: 0 auto; height: 1500px; width: 60%; border: 1px solid #000">Content</div>
</body>
EDIT Hãy coi chừng này khi sử dụng scrollTop trong Firefox. Animate scrollTop not working in firefox jQuery scrollTop - no support for negative values in Mozilla/Firefox Đã cho tôi một thời gian để tìm ra mã của tôi là tốt nhưng scrollTop là vấn đề này trong FF. Trong ví dụ này, hành vi cũng có thể được quan sát. Khi cuộn xuống và cố định neo, FF sẽ di chuyển đến vị trí ngẫu nhiên hoặc 2-4px trước hoặc sau div mục tiêu.
Tôi hiện đang sử dụng Scrolld.js để đạt được điểm ảnh hoàn hảo khi cuộn đến các điểm mong muốn trên các trình duyệt chính. Tôi không hiểu làm thế nào các công cụ trình duyệt khác nhau có thể làm cho một điều phổ biến như scrollTop từ đầu vào khác nhau (hoặc html hoặc cơ thể) theo như tôi hiểu và tôi mới vào jQuery. Đoán đây không phải là "lỗi" của jQuery nhưng cách các công cụ trình duyệt hiển thị scrollTop.
Nó hoạt động! Cảm ơn nhiều! Chỉ muốn tôi muốn. Có, tôi đã bao gồm jQuery nhưng không biết tôi đã có nó trong chức năng sẵn sàng tài liệu. – moderntimes