html - 現在のページ内の要素へのリンク

Question

Content、Main_Page、Document、Expensesなどのヘッダーを持つ多数のテーブルを含むHTMLページを作成しました。

ページ上部へのリンクを作成したい。そのリンクをクリックすると、特定のセクションに移動するはずです。したがって、以下のコードを使用してコンテンツをマップします。しかし、それは私にとってはうまくいきません。

<a href="#Content">Content Section</a>

Answer 1

リンクのアンカーを作成する必要があります。これを行う最新の方法は、適切な要素にid="Content"属性を与えることです。これを行う古い方法は、を使用することでした<a name="Content"></a>。

Answer 2

次のように、「ジャンプ」する要素を明確なIDに指定します。

<p id="idOfTag">Your content goes here</p>

次に、ページ上部のリンクで、その要素のIDを参照するようにします（注意してください#）。

<a href="#idOfTag">Jump</a>

複数のリンクを含む完全な例：

<ul>
  <li><a href="#contentParagraph">Content</a></li>
  <li><a href="#mainPageParagraph">Main page</a></li>
  <li><a href="#documentParagraph">Document</a></li>
  <li><a href="#expensesParagraph">Expenses</a></li>
</ul>
<p id="contentParagraph">
  <h4>Content</h4>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
  in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<p id="mainPageParagraph">
  <h4>Main page</h4>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
  in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<p id="documentParagraph">
  <h4>Document</h4>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
  in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<p id="expensesParagraph">
  <h4>Expenses</h4>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
  in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>

Answer 3

これを実現するために、タグnameの属性を使用できます。anchor

divあなたがIDを持つとしましょうcontent

<div id="content">This is my div</div>

次に、のと同じ属性を持つanchorタグがあることを確認しますnameiddiv content

<a href="#" name="content">Click to go to the top</a>

ライブデモ。

下にスクロールしてリンクを表示します

これを行うための別のアプローチは

<div id="content">My div</div>

次に、アンカータグのhrefは#contentである必要があります

<a href="#content">Click to go to top</a>

ライブデモ。

Answer 4

質問は回答済みのようですが、ここでこれらの要素に移行するときにスクロール効果を使用したい場合は、少しJSを抜粋してください。$（function（）{

    function filterPath(string) {
        return string
        .replace(/^\//,'')
        .replace(/(index|default).[a-zA-Z]{3,4}$/,'')
        .replace(/\/$/,'');
    }

    var locationPath = filterPath(location.pathname);
    var scrollElem = scrollableElement('html', 'body');

    // Any links with hash tags in them (can't do ^= because of fully qualified URL potential)
    $('a[href*=#]').each(function() {

        // Ensure it's a same-page link
        var thisPath = filterPath(this.pathname) || locationPath;
        if (  locationPath == thisPath
            && (location.hostname == this.hostname || !this.hostname)
            && this.hash.replace(/#/,'') ) {

                // Ensure target exists
                var $target = $(this.hash), target = this.hash;
                if (target) {

                    // Find location of target
                    var targetOffset = $target.offset().top;
                    $(this).click(function(event) {

                        // Prevent jump-down
                        event.preventDefault();

                        // Animate to target
                        $(scrollElem).animate({scrollTop: targetOffset}, 2000, function() {

                            // Set hash in URL after animation successful
                            location.hash = target;

                        });
                    });
                }
        }

    });

    // Use the first element that is "scrollable"  (cross-browser fix?)
    function scrollableElement(els) {
        for (var i = 0, argLength = arguments.length; i <argLength; i++) {
            var el = arguments[i],
            $scrollElement = $(el);
            if ($scrollElement.scrollTop()> 0) {
                return el;
            } else {
                $scrollElement.scrollTop(1);
                var isScrollable = $scrollElement.scrollTop()> 0;
                $scrollElement.scrollTop(0);
                if (isScrollable) {
                    return el;
                }
            }
        }
        return [];
    }

});