0

我想知道如何使一个 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);
        });

});

有任何想法吗？

4

3 回答 3

0

试试下面的代码

<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);
    });

});

于 2012-12-06T16:47:34.770 回答
0

好吧，你可以在没有任何 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);
});
于 2012-12-06T16:43:12.223 回答
0

有这个确切的问题，现在我有一个适用于移动设备、平板电脑和台式机的解决方案。但它确实需要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>
于 2019-05-05T20:03:12.353 回答