最佳方式

我創建基於此響應模板的頁面最佳方式

https://html5up.net/uploads/demos/phantom/

我想塊具有相同的頁面上的錨：當你點擊在它上面，它顯示你的內容（不重定向到不同的頁面）

什麼是最好的「現代」的方式來實現這一目標？純錨鏈接/ jquery/css其他？

你能告訴我一個例子嗎？

感謝

來源

2016-10-04 Sam Provides

根據我的最好的方法是用一個ID（顯然是唯一的）在同一頁上的目標內容放置<div id="generic"> ..content.. </div>和你<a>標籤的href，目標與href="#generic"的ID所需的股利。像這樣

<a href="#generic"> 
    <h2>Magna</h2> 
    <div class="content"> 
    <p>Sed nisl arcu euismod sit ame.</p> 
    </div> 
</a> 
..... 
..... 
..... 
<div id="generic">..</div>

此外，添加平滑滾動，使其看起來像它上下滑動到目標內容。

爲了不添加#generic到您的網址嘗試使用一個超級簡單的jQuery修復附加到上面的代碼：

$("article a").click(function(e){ 
    var $anchor = $(this); 
    $('html, body').stop().animate({ 
     scrollTop: $($anchor.attr('href')).offset().top 
    }, 1500); 
    e.preventDefault(); //this is the important line. 
});

我已經測試了這個在您的網站&它就像一個魅力！讓我知道是否有任何問題。

來源

2016-10-04 15:34:00

對我來說，它看起來像基本的錨鏈接（href到id）不滾動到確切的地方。而且我非常確定這在移動響應中不能很好地工作。 –

其實它確實:-)你可以看看我自己的網站的菜單如何工作[這裏]（http://nikhilnanjappa.github.io/） –

如何隱藏URL中的#part？當我點擊你的導航欄上的鏈接時，它不會添加＃，怎麼做？ –

谷歌...單頁應用（SPA），我知道這是可能使用AngularJS等，但我有一些可能的解決方案，只用jQuery/JavaScript的

實現這個看看Architecture for single page application (JavaScript)

而且看看http://singlepageappbook.com/single-page.html

來源

2016-10-04 15:32:21 Raul

有很多的可能性，這樣做，最簡單，最愚蠢的辦法是創建和這樣的錨鏈接：

<a href="#myContainerId">To my container</a>

其中href是您希望通過點擊觸及的容器的ID。當然這種方法跳躍沒有任何動畫。動畫滾動錨的一個很好的例子在這裏找到：

CSS tricks smooth scroll

讓我知道是否有幫助。

乾杯

來源

2016-10-04 15:33:21

回答

相關問題