jQuery的光滑滾動完整的網址，包括編號

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

據我瞭解，你想留在同一頁面上，只是出於某種原因，你希望你的內部鏈接是絕對的。

爲了實現與絕對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/