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的自动滚动

回答

相关问题