jQuery円滑なスクロールフルURL idを含む

Question

完全なURLを使用して円滑なスクロールを有効にする方法はちょうど不思議です。

これは、NAV

<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

私はあなたが同じページにとどまりたいと思う限り、何らかの理由で内部リンクを絶対的にしたいと思っています。あなたがそのようにそれを変更することができます絶対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 'のようなURLに活性化しないように、あなたは、セレクタを変更するが、 'http://domainname.com/#about'次に、ドメイン名の部分を切り捨てると、 '#about'のような内部リンクが再度表示されます。

フィドルは：https://jsfiddle.net/u5dL9rt3/