Html 链接到当前页面中的元素
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12386212/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Link to an element within the current page
提问by romi
I created a HTML page with a number of tables with headers like this: Content, Main_Page, Document, Expenses, etc.
我创建了一个 HTML 页面，其中包含许多带有如下标题的表格：Content、Main_Page、Document、Expenses 等。
I want to create a link for the top of the page. When I click that link it should go to the specific section. So I use the below code to map the content. But it's not working for me.
我想为页面顶部创建一个链接。当我单击该链接时，它应该转到特定部分。所以我使用下面的代码来映射内容。但这对我不起作用。
<a href="#Content">Content Section</a>
采纳答案by Neil
You need to create an anchor for the link. The modern way of doing this is to give the appropriate element an id="Content"attribute. The older way of doing this was to use <a name="Content"></a>.
您需要为链接创建一个锚点。这样做的现代方法是给适当的元素一个id="Content"属性。这样做的旧方法是使用<a name="Content"></a>.
回答by Abbas
Give the element you want to 'jump' to a clear ID, like so:
为您想要“跳转”的元素提供一个清晰的 ID，如下所示：
<p id="idOfTag">Your content goes here</p>
Then in the link on the top of the page, make it refer to the id of that element (mind the #):
然后在页面顶部的链接中，使其引用该元素的 id（注意#）：
<a href="#idOfTag">Jump</a>
Full example with multiple links:
带有多个链接的完整示例：
<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>回答by Priyank Patel
You can use nameattribute for your anchortag to achieve this.
您可以使用标签的name属性anchor来实现这一点。
Let say you have a divwith id content
假设你有一个div带有 id 的content
<div id="content">This is my div</div>
Next make sure you have a anchortag with nameattribute same as the idof the divcontent
下一步要确保你有一个anchor与标签name属性相同id的divcontent
<a href="#" name="content">Click to go to the top</a>
Scroll down to see the link
向下滚动以查看链接
Another approach to do this would be
另一种方法是
<div id="content">My div</div>
Then your anchor tag's href should be #content
那么你的锚标签的 href 应该是 #content
<a href="#content">Click to go to top</a>
回答by Ryan Rich
Looks like the question has been answered but if you wanted to use a scrolling effect when transitioning to those elements here a little JS snipt. $(function() {
看起来这个问题已经得到了回答，但是如果你想在转换到这些元素时使用滚动效果，这里有一个小 JS 片段。$（函数（）{
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 [];
}
});
