Question

正如标题所述，这是我的摘录。有人可以告诉我我要去哪里了吗？

var OnePageNav = function() {
  $(".smoothscroll[href^='#'], #ftco-nav ul li a[href^='#'], .scroll-link li a[href^='#'], .scroll-button p a[href^='#']").on('click', function(e) {
    e.preventDefault();

    var hash = this.hash,
      navToggler = $('.navbar-toggler');
    $('html, body').animate({
      scrollTop: $(hash).offset().top
    }, 700, 'easeInOutExpo', function() {
      window.location.hash = hash;
    });


    if (navToggler.is(':visible')) {
      navToggler.click();
    }
  });
  $('body').on('activate.bs.scrollspy', function() {
    console.log('nice');
  })
};
OnePageNav();

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p data-aos="fade-up" data-aos-delay="700"><a href="#section-about" class="btn btn-outline-white px-4 py-3 scroll-button">About Us</a></p>

<section class="ftco-section" id="section-about">
  <div class="container">
    <div class="row">
      <div class="col-md-12  mb-5" data-aos="fade-up">
        <h1 class="ftco-heading heading-thin mb-5">Founded in 2014, Wholesale Xbox Live has been providing digital keys and game codes to over to over 50 countries worldwide at very competitive prices.</h1>
      </div>
    </div>
  </div>
</section>

Answer 1

我不确定您从哪里获得代码以及意图是什么（可能那里还有更多代码），但是您的代码存在一些问题：

this.hash是undefined，这意味着hash是未定义的。
没关系，因为当您呼叫e.preventDefault();时，hash永远不会改变。
选择器对于示例中的链接不正确。因为链接具有类scroll-button，但是选择器包含.scroll-button p a[href^='#']。在您的情况下，它应该仅为.scroll-button。

因此，要解决该问题，您可以将hash设为链接的href。因此，在您的示例中，链接应指向#section-about，以便您可以使用href方法从attr()属性中获取“哈希”。

var OnePageNav = function() {
  $(".smoothscroll[href^='#'], #ftco-nav ul li a[href^='#'], .scroll-link li a[href^='#'], .scroll-button").on('click', function(e) {
    e.preventDefault();

    var hash = $(this).attr('href'),
      navToggler = $('.navbar-toggler');
    $('html, body').animate({
      scrollTop: $(hash).offset().top
    }, 700, function() {
      window.location.hash = '';
    });


    if (navToggler.is(':visible')) {
      navToggler.click();
    }
  });
  $('body').on('activate.bs.scrollspy', function() {
    console.log('nice');
  })
};
OnePageNav();

#section-about {
  margin-top: 100vh;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p data-aos="fade-up" data-aos-delay="700"><a href="#section-about" class="btn btn-outline-white px-4 py-3 scroll-button">About Us</a></p>

<section class="ftco-section" id="section-about">
  <div class="container">
    <div class="row">
      <div class="col-md-12  mb-5" data-aos="fade-up">
        <h1 class="ftco-heading heading-thin mb-5">Founded in 2014, Wholesale Xbox Live has been providing digital keys and game codes to over to over 50 countries worldwide at very competitive prices</h1>
      </div>
    </div>
  </div>
</section>

https://output.jsbin.com/ceforal/7

通知，我删除了“ easing”参数，因为该参数未包含在摘要中。

Answer 2

尝试

	$('a[href*="#"]').click(function(event) {

	var href = $(this.hash);

	  if (href.length) {
	     event.preventDefault();
		 $('html, body').animate({
			scrollTop: href.offset().top - 85
		 }, 750, function() {
			if (history.pushState) {
			    history.pushState(null, null, '#' + href.attr('id'));
			} else {
				location.hash = href.attr('id');
			}
		});		
	  }
});

.sec{
  margin-top: 100vh;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE HTML>

<html lang="en">
<head></head>

<body id="home">
<!-- Navigation -->
	<nav><a href="#section1">About Us</a></nav>
  <!-- Main Content -->
 	<main>
    <h2 id="section1" class="sec">Founded in 2014, Wholesale Xbox Live has been providing digital keys and game codes to over to over 50 countries worldwide at very competitive prices</h2>
	</main>
</body>
</html>

请参见示例link

平滑滚动不适用于p标签内的标签

2 个答案: