Question

我想知道如何在一个div中创建一个按钮滚动到另一个div中的一个锚点。锚的结构如下：

<a id="organisational_change"></a>

我拥有的jQuery是：

$(document).ready(function(){
var consultancyLinks=["organisational_change","organisational_development","executive_coaching","executive_team_development","corp_social_responsibility"];
$("#sidemenu_consultancy #sidemenu_consultancy_btn").each(function(){
$(this).css( 'cursor', 'pointer' );
});
    $("#sidemenu_consultancy #sidemenu_consultancy_btn").click(function(){
        $('html, body, #content_text').animate({scrollTop: $("#"+consultancyLinks[$(this).index()])},800);
        });

}）;

有什么想法吗？

Answer 1

嗯，你可以在没有任何javascript的情况下完成：

<a id="organisational_change" href="#id_of_other_element"></a>

否则，如果您想要动画，请执行以下操作：

$('a').click(function(e) {
    e.preventDefault();

    $('html, body').animate({scrollTop: $($(this).attr('href')).offset().top}, 800);
});

Answer 2

尝试以下代码

<div id="btn">
<button id="btn1"/>
</div>

<div id="ancr">
<a id="organisational_change"></a>
</div>

$(document).ready(function(){
$("#btn1").click(function(){
    $('body').animate({scrollTop:$("#organisational_change").scrollTop},800);
    });

}）;

Answer 3

有了这个确切的问题，现在我有了一个适用于移动设备，平板电脑和台式机的解决方案。但这确实需要JavaScript。在这里，使用您的代码。进行相应的调整。

<div id="btn">
<button id="btn1" onclick="ScrollDiv('organisational_change')/>
</div>

<div id="ancr">
<a id="organisational_change"></a>
</div>


 <script>
   function ScrollDiv(yourelement)
     {
      var myDiv         = document.getElementById('ancr');
      var myDivrect     = myDiv.getBoundingClientRect();
      var Card          = document.getElementById(yourelement);
      var Cardrect      = Card.getBoundingClientRect();
      var CardHeight    = Cardrect.height;
      var DivTopPadding = 25;
      var DivElementPad = 10;
      var Distance   = (DivTopPadding + ((CardHeight + DivElementPad ) * (CardIndex-1)) ;
      myDiv.scrollTo({
                      top: Distance,
                      left: 0,
                      behavior: 'smooth'
                    });
     }
 </script>

一个div中的按钮使其他div滚动到锚点

3 个答案: