Question

如何调整我必须滚动到锚点的javascript，还包括偏移量。我已经添加了200px的偏移规则，但没有任何效果。

                $('a[href*="#"]')
              .not('[href="#"]')
              .not('[href="#0"]')
              .click(function(event) {
                // On-page links
                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) {
                    event.preventDefault();
                    $('html, body').animate({
                      scrollTop: target.offset().top - 200;
                    }, 1000, function() {
                      var $target = $(target);
                      $target.focus();
                      if ($target.is(":focus")) {
                        return false;
                      } else {
                        $target.attr('tabindex','-1');
                        $target.focus();
                      };
                    });
                  }
                }
            });

Answer 1

使用jquery检查以下代码段以获取简单示例。

＆＃13;

$('a').click(function(evt) {
  evt.preventDefault();
  $('html, body').animate({
    scrollTop: $($(this).attr('href')).offset().top - 50
  }, 800, function() {});
});

＆＃13;

.empty {
  height: 500px;
  width: 100%;
  background: #ccc;
}

#content {
  height: 200px;
  width: 100%;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#content">Click Me!</a>
<div class="empty"></div>
<div id="content">
  Content goes here.!
</div>
<div class="empty"></div>

＆＃13;

如何使用Javascript调整偏移位置以进行smoth滚动？

1 个答案: