jQuery的自動滾動

我有多個列表項的下拉菜單，它看起來像這樣jQuery的自動滾動

<li class="dropdown"> 
         <a href="#" class="dropdown-toggle" data-toggle="dropdown">About Us <span class="caret"></span></a> 
         <ul class="dropdown-menu"> 
          <li><a href="about_us.html" id="headbutton1">Heading1</a></li> 
          <li><a href="about_us.html" id="headbutton2">Heading2</a></li> 
          <li><a href="about_us.html" id="headbutton3">Heading3</a></li> 
         </ul> 
        </li>

而在about_us.html文件我有這些

<div class="row"> 
     <div class="col-md-12"> 
      <h2 class="text-center" id="headbutton1">Heading 1</h2> 
      <p>Test 1.</p> 
     </div> 
    </div> 
    <div class="row"> 
     <div class="col-md-12"> 
      <h2 class="text-center" id="headbutton2">Heading 2</h2> 
      <p>Test 2.</p> 
     </div> 
    </div> 
    <div class="row"> 
     <div class="col-md-12"> 
      <h2 class="text-center" id="headbutton3">Heading 1</h2> 
      <p>Test 3.</p> 
     </div> 
    </div>

所以，當我點擊在菜單中列出項目（比如id ='headbutton2'），我需要加載關於我們頁面的相應部分（即id ='headbutton2'）加載。我使用jQuery的如下

$(document).ready(function() { 

    var scrollPoint = $('#headbutton2').offset().top - 120; 

     $('html, body').animate({ 
     scrollTop: scrollPoint 
    }, 'slow'); 


});

來源

2017-05-06 Rohit Kapali

你想直接轉至該部分在about_us頁面，或者你想去的有關頂部我們的網頁，然後滾動到相關部分？ –

轉到關於我們頁面的頂部，然後滾動到相關部分 –

我已更新我的答案以匹配此 –

如果你只是想去的頁面上的相關部分，您可以將trget添加到您的鏈接是這樣的：

<ul class="dropdown-menu"> 
    <li><a href="about_us.html#headbutton1">Heading1</a></li> 
    <li><a href="about_us.html#headbutton2">Heading2</a></li> 
    <li><a href="about_us.html#headbutton3">Heading3</a></li> 
</ul>

沒有需要滾動jQuery，因爲該鏈接將直接發送給該部分。

如果你想在about_us網頁的第一個土地，然後滾動到相應的部分，這是一個涉及多一點，你可以使用該查詢字符串。

<ul class="dropdown-menu"> 
    <li><a href="about_us.html?target=headbutton1">Heading1</a></li> 
    <li><a href="about_us.html?target=headbutton2">Heading2</a></li> 
    <li><a href="about_us.html?target=headbutton3">Heading3</a></li> 
</ul>

與這個jQuery：

$(document).ready(function() { 

var q = document.URL.split('?')[1]; 
var target = q.split('=')[0] === 'target' ? '#' + q.split('=')[1] : '#'; 

    var scrollPoint = $(target).offset().top - 120; 

     $('html, body').animate({ 
     scrollTop: scrollPoint 
    }, 'slow'); 

});

注：此代碼將適用於每一個頁面，你將需要改變它，如果你想你的查詢字符串包括其他信息，但如果你'只使用靜態頁面應該可以正常工作。

來源

2017-05-06 11:24:18

謝謝，這是有效的。 –

您可以滾動到特定的div像這樣：

var scrollPoint = $("#myDiv").offset().top; 
    $('html, body').animate({ 
     scrollTop: scrollPoint 
    }, 2000);

Fiddle Code

來源

2017-05-06 11:50:57

jQuery的自動滾動

回答

相關問題