從導航底部滾動到Div，而不是頁面頂部

Question

好的，所以我在標題中有一個滾動按鈕（#scroll），單擊該按鈕時會將下一個div（.scroll-up）滾動到頁面頂部。 但是，我希望該div滾動到nav元素的底部，而不是頁面的頂部。 我該怎么辦？

$("#scroll").click(function(){
    $(this).preventDefault;
    $('html,body').animate({
        scrollTop: $(".scroll-down").offset().top
    }, 1000)
});

Answer 1

演示版

$(this).preventDefault錯誤，使用e.preventDefault(); 其中e是事件，它在函數聲明中設置為第一個參數。

您沒有提供任何HTML，因此以它為例

<nav id="nav">
    <ul>
        <li><a href="#">Blah</a></li>
        <li><a href="#">Blah</a></li>
        <li><a href="#">Blah</a></li>
        <li><a href="#">Blah</a></li>
        <li><a href="#">Blah</a></li>
        <li><a href="#">Blah</a></li>
        <li><a href="#">Blah</a></li>
    </ul>
<nav>
<!-- content -->
<a id="scroll" href="#">^ TOP</a>

#nav的底部是$('#nav').height() + $('#nav').offset().top

$("#scroll").click(function(e){ // <-- variable for event is set here
  e.preventDefault();
  $('html,body').animate({
    scrollTop: $('#nav').height() + $('#nav').offset().top
  }, 1000);
});

Answer 2

.scroll-down元素應位於底部。 換句話說， scrollTop: $(".scroll-down").offset().top將文檔滾動到該元素。 並確保只有.scroll-down元素。

檢查小提琴。 單擊div'.advertising'將滾動到文檔底部。

的HTML

<div class="wrapper">
        <div class="advertising" id="scroll">Advertising</div>
    <div class="header">Header</div>


    <div class="slideshow">Slideshow</div>

    <div class="advertising">Advertising</div>

</div>

<div class="wrapper">

    <div id="content">

        <h1>Content Area</h1>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque feugiat eleifend orci, eget aliquam dolor elementum vel. Aliquam eu nulla eros, et tincidunt felis. Pellentesque congue sodales eleifend. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nulla suscipit nulla vel nisi fermentum ultricies. Integer ligula elit, gravida ac pretium nec, eleifend ultrices purus. Duis cursus orci et urna accumsan tempor. Nunc mattis tincidunt nulla, id porta velit sollicitudin blandit.

Duis vel augue quis elit ultrices fermentum ut eu risus. Mauris dictum nisl eget lorem pulvinar sit amet bibendum nunc scelerisque. Suspendisse ac libero magna, at imperdiet leo. Pellentesque vulputate venenatis vestibulum. Aenean varius turpis quis sem adipiscing volutpat. Fusce scelerisque iaculis augue, eget fringilla velit mattis nec. Maecenas sagittis dolor eget felis cursus imperdiet. Morbi ut dui libero. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sit amet mi ac diam semper hendrerit a id tellus. Morbi accumsan magna sit amet velit ultricies ut dapibus justo rutrum. Ut et ante dui, vel pellentesque velit.

In varius sodales odio sed dapibus. Ut ut orci quis ante hendrerit dignissim. Quisque at enim eget turpis adipiscing molestie. Sed sed nulla ante, sed pellentesque urna. Fusce fermentum, erat in consectetur elementum, ante nibh scelerisque dui, eget dictum urna felis nec dui. Quisque felis libero, placerat in mattis non, scelerisque nec nulla. Suspendisse potenti. In mauris lectus, pretium adipiscing dictum ut, ultrices nec enim. Fusce mauris nibh, auctor eget euismod egestas, vehicula quis augue. Sed eget tellus pharetra ligula adipiscing suscipit quis eu elit.

Duis tristique, mauris lacinia posuere sollicitudin, tellus nulla lacinia nulla, eget vulputate quam leo in nisi. Phasellus cursus, purus non accumsan ultricies, sem nibh accumsan elit, eget malesuada nulla purus sit amet quam. Fusce tempus justo vel turpis euismod aliquet. Integer pulvinar lacus vel diam consequat ut porttitor ante tempus. Curabitur sit amet nibh at libero accumsan volutpat. Nullam laoreet, metus non posuere faucibus, massa sapien lobortis justo, quis tempus purus orci semper nunc. Sed id sapien turpis. Vestibulum rutrum lacus sed augue mattis vel dignissim mi consectetur. Cras eget eros neque. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;

Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum convallis commodo sem, ac vehicula nisi fermentum a. Curabitur scelerisque auctor pellentesque. Proin non arcu ante, a ornare tortor. Maecenas faucibus porta orci, posuere facilisis odio consequat quis. Pellentesque placerat laoreet justo, sed eleifend sem consequat eget. Vestibulum euismod rhoncus semper. Cras congue dapibus massa at vehicula. In eros libero, adipiscing quis vestibulum id, commodo et dui. Curabitur semper aliquam adipiscing. Suspendisse et urna nulla. Sed iaculis vehicula adipiscing. Sed scelerisque, libero nec aliquam varius, quam mi posuere augue, ut tempor metus eros quis risus.     

    </div>

    <div id="left-tab-col">

        <a class="tab-button" style="top:10000px">Tab</a>   

    </div>

    <div id="right-tab-col">

        <a class="tab-button" style="top:10000px">Tab</a>           

    </div>

</div>

<div class="wrapper">



    <div class="footer">Footer</div>

    <div class="nav">Footer Nav</div>

</div>

JS

$("#scroll").click(function(){
  $('html,body').animate({
    scrollTop: $(".nav").offset().top
  }, 1000)
});

http://jsfiddle.net/SGCHt/487/

Answer 3

首先，我想指出您對與之鏈接的click動作或button動作的阻止，如果沒有正確輸入，則將運行該動作。

此外，由於我們錯過了一些html，因此您的代碼有點不完整，但是您的問題更清楚了，可以給出解釋。

這取決於您要在頁面上到達的位置以及到達頁面的方式，但是最常見的方式是使用achor和與之對應的id。 您可以使用該項目轉到特定的div。

例如，如果我單擊這樣的項目

 <div class="navbar-collapse collapse" id="nav" style="height: 1px;">
     <ul class="nav navbar-nav">
         <li><a href="#profile">Profile</a></li>`

它將跳到同一頁面上具有id profile的html對象，但是，為了獲得滾動效果，您可以添加類似的內容。

$("#nav ul li a[href^='#']").on('click', function(e) {
   e.preventDefault();
   var hash = this.hash;

   $('html, body').animate({
       scrollTop: $(this.hash).offset().top
     }, 300, function(){
       window.location.hash = hash;
     });   
});

如您在此處看到的，對象（函數取消中的e ）被阻止，而不是this 。

我的觀點是，這將使它作為滾動動畫進行動畫處理。 您還可以播放幾個動畫。

e.preventDefault(); 也可以用return false;交換return false; 如果您不想使用它。 那會是這樣的。

$('.scrollToTop').click(function(){
    $('html, body').animate({scrollTop : 0},1500, 'swing');
    return false;
});   

（這是使其滾動回頂部的代碼）

您可以在Jquery文檔中找到有關scrolltop函數的更多信息： https ://api.jquery.com/scrollTop/

祝好運

Answer 4

好了，這最終為我工作。 謝謝！

$("#scroll").click(function(e){
 e.preventDefault();
 var nav = $(".nav-bar").height() + $(".nav-bar").offset().top;
  $('html,body').animate({
    scrollTop: $(".scroll-down").offset().top - nav
  }, 1000)
});