jquery動畫滾動不起作用

我想使按鈕的滾動效果到我的內容。也許任何人都可以修復我的代碼並解釋它爲什麼不起作用？謝謝！jquery動畫滾動不起作用

這是我的HTML：

<div class="main"> 
<section class="section home"> 
    <header> 
     <div class="row"> 
      <div class="col-lg-12 col-md-12 col-sm-12"> 
       <h1>Home</h1> 
      </div> 
      <a href="#home-content" class="scroll">BUTTON</a> 
     </div> 
    </header> 
    <div class="content" id="home-content"> 
     <p> 
      My content 
     </p> 
    </div> 
</section> 
</div>

我的js文件： `

function scrollDown() { 
     $('a[href="scroll"]').click(function(event) { 
      event.preventDefault(); 
      var targetOffset = $('a[class="content"]').offset().top; 
      $('.main').animate({ 
       scrollTop: targetOffset 
      },1000); 

     }); 
    }

來源

2015-09-02 Baivaras

'$（ 'a.scroll'）'使用。 – RRK

我嘗試了所有這些調用，仍然無法正常工作。 – Baivaras

你包括哪些圖書館？我的意思是，你只參考jQuery，還是jQueryUI？ –

這裏是一個演示，告訴您如何使您的按鈕，滾動窗口按下時直到您的內容。它爲您的內容添加了一個邊緣頂部，以將其推到視口底部以下，以便展示滾動操作。

爲了使它工作，我需要刪除scrollDown函數，更改一些jQuery選擇器，併爲html, body上的scrollTop設置動畫。

現場演示：

$('a.scroll').click(function(event) { 
 
    event.preventDefault(); 
 
    var targetOffset = $('div.content').offset().top; 
 
    $("html, body").animate({ 
 
     scrollTop: targetOffset + "px" 
 
    },1000); 
 
});

.content { 
 
    margin-top: 500px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="main"> 
 
<section class="section home"> 
 
    <header> 
 
     <div class="row"> 
 
      <div class="col-lg-12 col-md-12 col-sm-12"> 
 
       <h1>Home</h1> 
 
      </div> 
 
      <a href="#home-content" class="scroll">BUTTON</a> 
 
     </div> 
 
    </header> 
 
    <div class="content" id="home-content"> 
 
     <p> 
 
      My content 
 
     </p> 
 
     <p> 
 
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris eu aliquam sapien, nec accumsan odio. Nunc ac purus accumsan augue sodales malesuada ut at ipsum. Curabitur volutpat et risus ut ultrices. Fusce ante sapien, laoreet non scelerisque nec, elementum et nisl. Curabitur pharetra a sapien ac convallis. Aliquam dapibus viverra sem a lacinia. Proin tempor orci nec massa feugiat, ac tristique tellus convallis. 
 
     </p> 
 
    </div> 
 
</section> 
 
</div>

的jsfiddle版本：https://jsfiddle.net/vhaye0c0/1/

來源

2015-09-02 19:14:30

非常感謝！我沒有看到我的選擇器出現這個錯誤！ – Baivaras

jquery動畫滾動不起作用

回答

相關問題