jQuery smooth scroll包含id的完整url

时间:2016-09-09 11:22:50

标签: jquery scrolltop

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

这是导航

new_list = []
for element in array2:
    if element in array1:
        new_list.append(element)

想用

<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>

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

<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>

任何帮助都会非常感谢。

1 个答案:

答案 0 :(得分:0)

据我了解,您希望保持同一页面,只是出于某种原因,您希望内部链接是绝对的。

要使用绝对URL实现内部链接,您可以更改它:

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”但“http://domainname.com/#about”等网址上激活。然后你切断了域名部分,你会有一个像'#about'这样的内部链接。

小提琴:https://jsfiddle.net/u5dL9rt3/