Question

我创建了一个HTML页面，其中包含许多带有以下标题的表：Content，Main_Page，Document，Expenses等。

我想为页面顶部创建一个链接。当我点击该链接时，它应该转到特定部分。所以我使用下面的代码来映射内容。但这对我不起作用。

<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标记的name属性与id div

的content相同

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

Live Demo.

向下滚动以查看链接

另一种方法是

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

然后你的锚标记的href应该是#content

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

<强> Live Demo.

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 [];
    }

});

链接到当前页面中的元素

4 个答案: