[英]How to scroll up and down on page with jQuery?
我在頁面中添加了一個鏈接以向下滾動:
<div class="scroll">
<a onclick="scroll_down()" href="#" id="'scroll_id">
click me
</a>
</div>
<script>
function scroll_down() {
var y = $(window).scrollTop(); //current position
$("html, body").animate({scrollTop: y + $(window).height()}, 600);
}
function scroll_top() {
window.scrollTo(0, 0);
}
</script>
當底部到達scroll_top
時,我想設置onclick
屬性。
向下滾動有效,但是到達底部時, <a>
標記的onclick
屬性不會更改。
<script>
window.onscroll = function (ev) {
if ((window.innerHeight + window.scrollY) >= $(document).height()) {
console.log('bootom')
$('#scroll_id').attr('onClick', '');
$('#scroll_id').attr('onClick', 'scroll_top()');
}
}
</script>
有人告訴我錯誤在哪里嗎? 為什么它不起作用?
使用on*
事件屬性被認為是不好的做法-在運行時對其進行修改更糟。
更好的解決方案是使用單個不干擾事件處理程序,該事件處理程序確定頁面的當前滾動位置並根據需要向上/向下移動,如下所示:
$(function() { $('#scroll_id').click(function(e) { e.preventDefault(); var $win = $(window); var scrollTarget = $win.height() + $win.scrollTop() >= $(document).height() ? 0 : $win.scrollTop() + $win.height() $("html, body").animate({ scrollTop: scrollTarget }, 600); }); });
.scroll { position: fixed; top: 0; left: 0; z-index: 10; } #content { height: 1000px; position: relative; } #content div { position: absolute; } #content .top { top: 20px; } #content .middle { top: 500px; } #content .bottom { bottom: 0; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="scroll"> <a href="#" id="scroll_id">click me</a> </div> <div id="content"> <div class="top">top</div> <div class="middle">middle</div> <div class="bottom">bottom</div> </div>
語法錯誤:
<a onclick="scroll_down()" href="#" id="'scroll_id">
它應該是
id="scroll_id">
(已刪除多余的')
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.