web-dev-qa-db-ja.com

アンカーを使用せずにWebページの上部へのリンクを作成する

現在、アンカーを使用してページの上部へのリンクがいくつかあるHTMLドキュメントがあります

<body id="topofpage">
   ...
   <a href="#topofpage">Go to top</a>

ただし、役に立たないIDを作成する必要がなく、リンクをクリックした後にURLに「#topofpage」がどのように表示されるかが好きではありません。 JavaScriptを使用せずにページの上部にリンクするためにできることは他にありますか？ <a href="">でアンカーを完全に削除しようとしましたが、ページが更新されます。

htmlanchor
46
hugomg

HTML5によると 空のフラグメントを指定#および特別なフラグメント#topは、ページの上部にリンクします。

<a href="#">Go to top</a>

<a href="#top">Go to top</a>

これらの特別なフラグメント名を使用する場合、一致するアンカーを作成する必要はありません。

75
hugomg

あなたはjavascriptを使用して試すことができます

<a onclick="scroll(0,0)">

または、jQueryを使用できます

$("#Top").click(function(){
 scroll(0,0);
});
11
user1513192

JavaScriptを使用せずにあなたが言ったことは知っていますが、実際のアンカーの使用を避ける唯一の方法はそれだと思います。次のjQueryは、アンカーを#top hrefに置き換え、URLを変更せずに上部へのニースアニメーションスクロールを実行します（詳細については original author のページを参照してください）。

$(document).ready(function() {
    $('a[href=#top]').click(function(){
        $('html, body').animate({scrollTop:0}, 'slow');
        return false;
    });
})

完全性のためのjsfiddle

ただし、私は セマンティックHTML に固執し、その目的のためにアンカーを使用して、ブラウザーの最大数で適切な意味を解釈できるようにします。スクリーンリーダーやその他の特別なブラウザを必要とする障害を持つ人々を忘れないでください。アンカーは機能することが保証されています。

それに加えて、Google 2009年に発表 ページ内アンカーを直接利用して、Web検索者が探している追加のコンテキストを提供するいくつかの新しいインデックス作成機能。多くの場合、ユーザーが非常に興味を持っているページのセクションがあるかもしれません。Googleは最適な関連性のためにページのアンカーへの直接リンクを提供できます。

私の視点から見た一番下の行-アンカーを無効にしないでください。それらを使用します。

5
Sumo

アンカータグを使用してページのトップを取得する別の便利な方法は、

<a href='#top'> Go back to the top of the page.</a>

このように使用すると、ページが自動的に現在のページの上部にスクロールします。これが誰かに役立つことを願っています。

2
Vash