＃マークで内容が変更されています

Question

私は興味のあるシステムを持つ多くのWebサイトを見てきました。 システムは次のようなものです：1ページしかありません。メニューのいずれかのリンクをクリックすると、＃マークを使用してページがその領域にスライドします。

URLは通常のようなものです：私はすべての現在の例を見つけることができませんでしたが、私はこのように要約することができますexample.com/#content1

：

を----メニュー（通常は固定） - ---

まずコンテンツ

---

第2のコンテンツ

---

など。

メニューのリンクをクリックするとページがその領域にスライドします。

どうすればいいですか？

Answer 1

メニューで対象とする要素にidを指定し、そのidをハッシュフラグメント（#xyz）と一致させます。

例えば、このリンク：

<a href="#first">First</a> 

クリックこの要素にユーザーがかかります。

<div id="first">...</div> 

---

あなたは "スライディング。" と述べましたデフォルトでは、ページは、スライドするのではなく、にジャンプします。スライディングは、デフォルトのビヘイビアをアニメーションでオーバーライドすることによって実行されます。特定のプラグインを推薦することはSOのために、トピックではなく、例えば、ここで（あなたが質問にタグ付けされた）jQueryを使って簡単な例を示します：

// Handle clicks on our navigation anchors 
 
$(".nav a").on("click", function(e) { 
 
    // Get the href attribute, which will be #first or similar, and get the element using that 
 
    // as a CSS selector 
 
    var hash = this.getAttribute("href"); 
 
    var target = $(hash); 
 
    // Tell jQuery to animate us to that location. Note that some 
 
    // browsers animate body, others `html`, so we 
 
    // do both 
 
    $('body, html').animate({ 
 
    scrollTop: target.position().top 
 
    }, 800); 
 
    
 
    // Prevent the usual jump 
 
    e.preventDefault(); 
 
    
 
    // Set the hash *without* causing the jump (for bookmarks and such) 
 
    if (history && history.replaceState) { 
 
    history.replaceState(null, null, hash); 
 
    } 
 
});

.fill { 
 
    height: 5em; 
 
}

<ul class="nav"> 
 
    <li><a href="#first">First</a></li> 
 
    <li><a href="#second">Second</a></li> 
 
    <li><a href="#third">Third</a></li> 
 
    <li><a href="#fourth">Fourth</a></li> 
 
</ul> 
 
<div class="fill"> 
 
    Some content to fill space 
 
</div> 
 
<div id="first" class="fill">This is the first target</div> 
 
<div id="second" class="fill">This is the second target</div> 
 
<div id="third" class="fill">This is the third target</div> 
 
<div id="fourth" class="fill">This is the fourth target</div> 
 
<div class="fill">More filler</div> 
 
<div class="fill">More filler</div> 
 
<div class="fill">More filler</div> 
 
<div class="fill">More filler</div> 
 
<div class="fill">More filler</div> 
 
<div class="fill">More filler</div> 
 
<div class="fill">More filler</div> 
 
<div class="fill">More filler</div> 
 
<div class="fill">More filler</div> 
 
<div class="fill">More filler</div> 
 
<div class="fill">More filler</div> 
 
<div class="fill">More filler</div> 
 
<div class="fill">More filler</div> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Answer 2

ものは、ユーザーが定義し、アンカータグです要素にIDを渡して

Ex。あなたはこのようなリンクを持っている場合：www.yoursite.com/whatever.html#gohere

をそして「gohere」リンクをクリックする

<p id="gohere"></p>

であるidを持つ<p>要素は、その要素にまでジャンプします。