Question

我试图在location.hash中添加一个平滑的滚动，但它似乎无法正常工作。

如何解决这个问题？

JS

function test_function(){
    window.location.hash = '#divid';
    jQuery(document).ready(function($){
        $('html, body').animate({ scrollTop: $(test_function).target.offset().top }, 1000);
    });
}

HTML

<div>
<a href="<?php echo $_POST['referrer'] ?>#divid">Find a store</a>
</div>

Answer 1

我觉得，您的上述代码console出现了scrollTop错误，因为$(test_function).target.未定义。您需要定位正确的element才能顺利导航到它。以下是您可以使用的示例代码段。

function test_function() {
  $('html, body').animate({
    scrollTop: $("#divid").offset().top
  }, 2000);
}

#divid {
  position: absolute;
  top: 800px;
  width: 200px;
  height: 200px;
  background: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a onclick="test_function(this)" href="#">Find a store</a>
<div id="divid"></div>

Answer 2

简单回答我找到了here，在这里你也可以使用多个锚标签和不同的div id。

<a href="<?php echo $_POST['referrer'] ?>#divid">Find a store</a>

<script type="text/javascript">
    $(function() {
      $("a[href*='#']:not([href='#'])").click(function() {
        if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
        var target = $(this.hash);
        target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
        if (target.length) {
          $('html,body').animate({
            scrollTop: target.offset().top
          }, 2000);
          return false;
        }
      }
     });
    });
</script>

<div id="divid">Scroll Section</div>

如何使用location.hash平滑滚动？

2 个答案: