jquery ScrollTop未进入正确位置

dgiusagp 于 2023-08-04 发布在 jQuery

关注(0)|答案(1)|浏览(121)

我尝试使用按钮滚动到div，我使用jquery & scrollTop，但结果不是很精确，并且有一半的时间没有滚动到正确的位置...在寻找解决方案后，我找到了this answer，它似乎针对我的确切问题，但它不适用于我目前的结构，我不知道为什么。
下面是我的当前代码：

$(document).ready(function() {
  $(".pabclick").click(function() {

    var ancre = '#' + $(this).attr('data-ancre');

    $('.pabmargin').stop().animate({
      scrollTop: $(ancre).offset().top +
        $('.pabmargin').scrollTop() -
        $('.pabmargin').offset().top
    }, 1000, function() {

    });
  });
});

.pabmargin {
  width: 300px;
  flex-grow: 1;
  max-height: 200px;
  overflow: auto;
  padding: 0 25px;
}

<script src="https://code.jquery.com/jquery-3.7.0.js" integrity="sha256-JlqSTELeR4TLqP0OG9dxM7yDPqX1ox/HfgiSLBj8+kM=" crossorigin="anonymous"></script>

<main>
  <div class="pabcontenu">
    <div id="contexte">
      <div class="pabmain">
        <div class="pabmargin">Text</div>
      </div>
    </div>
    <div id="reglement">

      <div class="pabmain">
        <div class="pabbann">
          <button class="pabclick" data-ancre="avatars">Avatars</button>
          <button class="pabclick" data-ancre="dcs">DCs</button>
        </div>
        <div class="pabmargin">

          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed at accumsan massa. Nulla non nibh quis libero bibendum lacinia. Nam molestie blandit odio non varius. Vestibulum dignissim leo malesuada quam sodales, nec fermentum massa vehicula.
            Mauris iaculis augue orci, sit amet aliquam justo malesuada et. Aenean cursus, ante ut viverra sodales, ipsum risus suscipit lectus, vel ullamcorper est eros et ligula. Curabitur dapibus dictum ultrices. Morbi posuere justo neque, in egestas
            lorem efficitur sed. Mauris cursus nisl sit amet ante vulputate, et porta sem vulputate. Nam fringilla semper tellus eu faucibus. Mauris hendrerit metus tellus, non aliquet eros sagittis quis. Nullam mollis efficitur augue, fermentum egestas
            massa sodales eget. Praesent aliquet diam non augue gravida, efficitur mattis augue commodo. Cras nec fermentum magna, sit amet euismod augue. Proin sed ante sed ante luctus interdum vitae sit amet magna.</p>
          <p>Praesent placerat posuere massa, vel tincidunt purus auctor ut. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Duis vulputate ante dignissim libero pellentesque egestas. Cras laoreet dolor vitae erat
            pharetra, eu suscipit ex vehicula. Vestibulum in dui est. Cras eleifend, urna non tempus aliquet, magna massa tempus erat, id semper erat ipsum eget lorem. Nullam sed hendrerit tortor. Nulla id eleifend nisi. Etiam convallis neque odio, nec
            malesuada risus porttitor ac. Maecenas pulvinar sapien nec dui laoreet tempor. Curabitur velit lectus, aliquam sit amet commodo ac, fringilla auctor sapien.</p>

          <h4 id="avatars">Avatars</h4>

          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed at accumsan massa. Nulla non nibh quis libero bibendum lacinia. Nam molestie blandit odio non varius. Vestibulum dignissim leo malesuada quam sodales, nec fermentum massa vehicula.
            Mauris iaculis augue orci, sit amet aliquam justo malesuada et. Aenean cursus, ante ut viverra sodales, ipsum risus suscipit lectus, vel ullamcorper est eros et ligula. Curabitur dapibus dictum ultrices. Morbi posuere justo neque, in egestas
            lorem efficitur sed. Mauris cursus nisl sit amet ante vulputate, et porta sem vulputate. Nam fringilla semper tellus eu faucibus. Mauris hendrerit metus tellus, non aliquet eros sagittis quis. Nullam mollis efficitur augue, fermentum egestas
            massa sodales eget. Praesent aliquet diam non augue gravida, efficitur mattis augue commodo. Cras nec fermentum magna, sit amet euismod augue. Proin sed ante sed ante luctus interdum vitae sit amet magna.</p>
          <p>Praesent placerat posuere massa, vel tincidunt purus auctor ut. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Duis vulputate ante dignissim libero pellentesque egestas. Cras laoreet dolor vitae erat
            pharetra, eu suscipit ex vehicula. Vestibulum in dui est. Cras eleifend, urna non tempus aliquet, magna massa tempus erat, id semper erat ipsum eget lorem. Nullam sed hendrerit tortor. Nulla id eleifend nisi. Etiam convallis neque odio, nec
            malesuada risus porttitor ac. Maecenas pulvinar sapien nec dui laoreet tempor. Curabitur velit lectus, aliquam sit amet commodo ac, fringilla auctor sapien.</p>

          <h4 id="dcs">Doubles-comptes</h4>

          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed at accumsan massa. Nulla non nibh quis libero bibendum lacinia. Nam molestie blandit odio non varius. Vestibulum dignissim leo malesuada quam sodales, nec fermentum massa vehicula.
            Mauris iaculis augue orci, sit amet aliquam justo malesuada et. Aenean cursus, ante ut viverra sodales, ipsum risus suscipit lectus, vel ullamcorper est eros et ligula. Curabitur dapibus dictum ultrices. Morbi posuere justo neque, in egestas
            lorem efficitur sed. Mauris cursus nisl sit amet ante vulputate, et porta sem vulputate. Nam fringilla semper tellus eu faucibus. Mauris hendrerit metus tellus, non aliquet eros sagittis quis. Nullam mollis efficitur augue, fermentum egestas
            massa sodales eget. Praesent aliquet diam non augue gravida, efficitur mattis augue commodo. Cras nec fermentum magna, sit amet euismod augue. Proin sed ante sed ante luctus interdum vitae sit amet magna.</p>
          <p>Praesent placerat posuere massa, vel tincidunt purus auctor ut. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Duis vulputate ante dignissim libero pellentesque egestas. Cras laoreet dolor vitae erat
            pharetra, eu suscipit ex vehicula. Vestibulum in dui est. Cras eleifend, urna non tempus aliquet, magna massa tempus erat, id semper erat ipsum eget lorem. Nullam sed hendrerit tortor. Nulla id eleifend nisi. Etiam convallis neque odio, nec
            malesuada risus porttitor ac. Maecenas pulvinar sapien nec dui laoreet tempor. Curabitur velit lectus, aliquam sit amet commodo ac, fringilla auctor sapien.</p>

        </div>

      </div>
    </div>
    <div id="groupes">
      <div class="pabmain">
        <div class="pabmargin">Text</div>
      </div>
    </div>
  </div>
</main>

编辑：我简化了我的代码，所以希望它更容易理解它做了什么;基本上，我在链接上使用：target创建了标签，所以我需要使用jquery来模拟标签内文本的锚点，例如在“Règlement”标签中，你可以看到我的问题所在：当你在顶部，它正确地滚动到由按钮指定的h4标题，但如果你已经滚动了一点，它只是回到顶部…这似乎与.pabcontenu中有一个先前的div有关，如果我取出#contexte，它就可以正常工作。但我不能把那个潜水艇拿出来我需要它啊
编辑2：似乎scrollTop（）总是因为某种原因返回0？

jquery

来源：https://stackoverflow.com/questions/76712588/scrolltop-not-going-to-correct-position

1条答案

按热度按时间

sczxawaw1#

我弄明白了为什么scrollTop的行为方式！首先，我在控制台中检查scrollTop（）的值，发现无论我滚动多少.pabmargin，它都保持为0，所以这非常奇怪。而且，当我删除了我的部分结构时，脚本工作得很完美。连接这两个点，我意识到在我的代码中有多个.pabmargin div，所以scrollTop被应用于第一个，它没有滚动！所以我所要做的就是瞄准正确的.pabmargin div，所以我最终得到了这个脚本：

$(document).ready(function (){
        $(".pabclick").click(function (){
            var pabmargin = $(this).parent(".pabsommaire").next();
            var ancre = '#' + $(this).attr('data-ancre');
            
            $(pabmargin).stop().animate({
                scrollTop: $(ancre).position().top 
                + $(pabmargin).scrollTop()
                - $(pabmargin).position().top
                }, 1000, function() {
            });
                
        });
    });

字符串
现在工作得很好：）只是想如果有人遇到同样的问题，我会分享。

赞(0）回复(0）举报 2023-08-04

我来回答

jquery ScrollTop未进入正确位置

1条答案

相关问题

热门标签

最新问答