如何使用jQuery在页面上上下滚动？

我添加了一个链接到我的网页向下滚动：如何使用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>

我想设置onclick属性时达到scroll_top底部。

向下滚动正在工作，但当达到底部时，的<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>

做一些身体告诉我错误在哪里？为什么它不起作用？

来源

2017-10-09 pietà

你''ID有一个错误的'''在它的开头：'ID = “'scroll_id”' - 我怀疑你的jQuery选择'$（'＃scroll_id '）'没有找到任何东西。 – Santi

在你的jQuery代码中使用'onclick'而不是'onClick'。 –

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

来源

2017-10-09 13:55:34

非常感谢您的回答..这太棒了。但有一点，当再次点击'click me'时，'top'会再次显示（闪烁）。如何消除这种行为？ –

我的错误 - 我错过了对'preventDefault（）'的调用来停止链接到'＃'的效果。我为你更新了答案 –

语法错误：

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

应该

 id="scroll_id">

（除去多余的 '）

来源

2017-10-09 14:01:03

感谢您的回答！一个注释，仅仅指出拼写错误的答案应该作为评论与闭幕投票。印刷错误被认为是“Off Topic”，并且非常不鼓励回答关键问题。 – Santi

如何使用jQuery在页面上上下滚动？

回答

相关问题