在子页面上平滑滚动(WP / Bootstrap)

时间:2017-08-22 12:22:30

标签: javascript php jquery wordpress twitter-bootstrap

我在我的Wordpress网站上使用Bootstrap JS Scrollspy。

Scrollspy在目标网页上运行正常。

我需要的是在子页面上进行平滑滚动,因此它会将我滚动到仅位于着陆页上的网站的一部分。

我在使用标签前的斜杠获得了很好的体验:<a href"/#home"&gt;但这种情况似乎对我不起作用。

<script>
$(document).ready(function(){
  // Add scrollspy to <body>
  $('body').scrollspy({target: ".navbar", offset: 50});   

  // Add smooth scrolling on all links inside the navbar
  $(".navbar a").on('click', function(event) {
    // Make sure this.hash has a value before overriding default behavior
    if (this.hash !== "") {
      // Prevent default anchor click behavior
      event.preventDefault();

      // Store hash
      var hash = this.hash;

      // Using jQuery's animate() method to add smooth page scroll
      // The optional number (800) specifies the number of milliseconds it takes to scroll to the specified area
      $('html, body').animate({
        scrollTop: $(hash).offset().top
      }, 800, function(){

        // Add hash (#) to URL when done scrolling (default click behavior)
        window.location.hash = hash;
      });
    }  // End if
  });
});
</script>

0 个答案:

没有答案