jQueryでページを上下にスクロールするには？

Question

私はスクロールダウンする私のページへのリンクを追加しました：

<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属性を設定します。

スクロールダウンが機能していますが、下部に達すると、onclickの属性が<a>タグに変更されません。

<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> 

エラーはどこですか？それはなぜ機能していないのですか？

Answer 1

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>

Answer 2

構文：

はるかに優れたソリューションは、このように、ページの現在のスクロール位置を決定し、必要に応じて/上下に移動し、単一の控えめなイベントハンドラを使用することですエラー：

<a onclick="scroll_down()" href="#" id="'scroll_id"> 

それがあるべき

 id="scroll_id"> 

（余分な削除 '）