Html 如何导航到页面的某个部分
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5172717/
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
How to navigate to a section of a page
提问by truthSeekr
I have a landing page with links. How can I direct user to a section of a different page?
我有一个带链接的登陆页面。如何将用户定向到不同页面的某个部分？
Main Page:
主页：
<a href="/sample">Sushi</a>
<a href="/sample">BBQ</a>
Sample Page:
示例页面：
<div id='sushi'></div>
<div id='bbq'></div>
Clicking on "Sushi" or "BBQ" in the Main Page should navigate the user to the div with id sushior bbq(respectively) of the page sample.
单击主页中的“寿司”或“烧烤”应将用户导航到带有 idsushi或bbq（分别）页面的 div sample。
Is it possible without JQuery? I do not mind using JQuery but a simpler solution using html would work too.
没有 JQuery 有可能吗？我不介意使用 JQuery，但使用 html 的更简单的解决方案也可以。
回答by Lightness Races in Orbit
回答by RedSoxFan
Wrap your div with
用你的 div 包裹
<a name="sushi">
<div id="sushi">
</div>
</a>
and link to it by
并链接到它
<a href="#sushi">Sushi</a>
回答by Brandon
Use anchors.
使用锚点。
Main Page:
主页：
<a href="/sample#sushi">Sushi</a>
<a href="/sample#bBQ">BBQ</a>
Sample Page:
示例页面：
<div id='sushi'><a name="sushi"></a></div>
<div id='bbq'><a name="bbq"></a></div>
回答by Manikandan D
Use an call thru section, it works
使用呼叫直通部分，它有效
<div id="content">
<section id="home">
...
</section>
Call the above the thru
调用上面的直通
<a href="#home">page1</a>
Scrolling needs jquery paste this.. on above to ending body closing tag..
滚动需要 jquery 将此粘贴到上面以结束正文结束标记..
<script>
$(function() {
$('a[href*=#]:not([href=#])').click(function() {
if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
if (target.length) {
$('html,body').animate({
scrollTop: target.offset().top
}, 1000);
return false;
}
}
});
});
</script>
回答by wasim sofi
Main page
主页
<a href="/sample.htm#page1">page1</a>
<a href="/sample.htm#page2">page2</a>
sample pages
示例页面
<div id='page1'><a name="page1"></a></div>
<div id='page2'><a name="page2"></a></div>
回答by Shifeng Liu
My Solutions:
我的解决方案：
$("body").scrollspy({ target: ".target", offset: fix_header_height });
$(".target").click(function() {
$("body").animate(
{
scrollTop: $($(this).attr("href")).offset().top - fix_header_height
},
500
);
return;
});
回答by Otis Zeon
Use hypertext reference and the ID tag,
使用超文本引用和 ID 标签，
Target Text Title
目标文本标题
Some paragraph text
一些段落文本
目标文本<h1><a href="#target">Target Text Title</a></h1>
<p id="target">Target Text</p>
