jQuery 平滑滚动完整 url 包括 id

Question

只是想知道如何使用完整 url 启用平滑滚动。

这是导航

<nav class="primary-nav">
  <ul>
    <li><a href="http://domainname.com/">Home</a></li>
    <li><a href="#about">About</a></li>
    <li><a href="#services">Services</a></li>
    <li><a href="http://domainname.com/contact">Contact</a></li>
  </ul>
</nav>

想用

<nav class="primary-nav">
  <ul>
    <li><a href="http://domainname.com/">Home</a></li>
    <li><a href="http://domainname.com/#about">About</a></li>
    <li><a href="http://domainname.com/#services">Services</a></li>
    <li><a href="http://domainname.com/contact">Contact</a></li>
  </ul>
</nav>

这是用于滚动到页面部分的 jQuery 代码。

function smoothScroll(duration) {
 $('a[href^="#"]').on('click', function (event) {
  var target = $($(this).attr('href'));
   if (target.length) {
     event.preventDefault();
     $('html, body').animate({
      scrollTop: target.offset().top
     }, duration);
   }
  });
 }

如有帮助将不胜感激。

Answer 1

据我了解，您希望保持一致，只是出于某种原因，您希望内部 link 是绝对的。

要使用绝对 URL 实现内部 linking，您可以这样更改它：

JavaScript:

 var duration = 1000;
 var domainname = 'http://domainname.com/';

 $('a[href^="'+domainname+'#"]').on('click', function (event) {
   var target = $(this).attr('href');
   if (target.length) {
     event.preventDefault();

     target = $( target.replace(domainname, '') );

     $('html, body').animate({
        scrollTop: target.offset().top
     }, duration);
   }
  });

说明：您更改了选择器，使其不会在“#about”之类的 URL 上激活，而是在“http://domainname.com/#about”之类的 URL 上激活。然后你切断域名部分，你将再次拥有一个内部link，如'#about'。

Fiddle: https://jsfiddle.net/u5dL9rt3/

jQuery 平滑滚动完整 url 包括 id

jQuery smooth scroll full url including id

jquery

scrolltop