Javascript 使页面跳转到特定位置的Javascript
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3569329/
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
Javascript to make the page jump to a specific location
提问by roger rover
I there a way in javascript to make the page jump to a specific location on the page, such as
我在javascript中有一种方法可以使页面跳转到页面上的特定位置，例如
<span id='jump_to_this_location'></span>
I do not want to re=load page,
我不想重新=加载页面，
回答by Nick Craver
You can set the location.hashproperty, like this:
您可以设置location.hash属性，如下所示：
window.location.hash = "jump_to_this_location";
回答by Moses
This can be accomplished by first creating an anchor for the page landing spot using HTML.
这可以通过首先使用 HTML 为页面登陆点创建一个锚来实现。
<a name="jumpHere">somewhere</a>
Once you have the landing site, simply use the JavaScript:
有了登陆站点后，只需使用 JavaScript：
window.location = 'yoursite.html#jumpHere';
回答by Vanguard
If you use jQuery it's pretty simple here is some sample code
如果您使用 jQuery，这里是一些示例代码，这很简单
Bellow is the #nav where I stored all the clickable links to the articles in this example
Bellow 是 #nav，我在其中存储了本示例中文章的所有可点击链接
Note: I used the goto attribute(custom) to pass the ID for the target Article
注意：我使用了 goto 属性（自定义）来传递目标文章的 ID
<div id='nav'>
<div goto='text1'>Link To Text 1</div>
<div goto='text2'>Link To Text 2</div>
</div>
Here, bellow are the Articles you will be jumping to.
在这里，下面是您将跳转到的文章。
Note: The JavaScript in the last code sample takes the distance of the tag to the top of that page and then scrolls the page down by that same distance measurement taken.
注意：最后一个代码示例中的 JavaScript 获取标记到该页面顶部的距离，然后按照所采取的相同距离测量值向下滚动页面。
<div id='articles_container'>
<article>
<h1 id='text1'></h1>
<p>
Sample article Paragraph 1
</p>
</article>
<article>
<h1 id='text2'></h1>
<p>
Sample article Paragraph 2
</p>
</article>
</div>
Finally this is the javascript + jQuery that makes it all work, this solution is best when you are working with fixed and layered components.
最后，这是 javascript + jQuery 使这一切正常工作，当您使用固定和分层组件时，此解决方案是最佳选择。
<script>
$(document).ready(function(){
$('#nav div').click(function(){
var id = "#" + $(this).attr('goto');
var top = $(id).position().top;
$('html').scrollTop(top);
});
});
</script>
回答by WayneF
I realize this question is five years old, but people still find it, and it seems a shame no one has ever answered it...
我意识到这个问题已经五年了，但人们仍然找到它，而且似乎没有人回答过它似乎很遗憾......
Specifically "Without Reloading Page" as asked,
特别是“无需重新加载页面”，如所问，
and where there is a name="HERE" or id="HERE" label somewhere in the html ("HERE" is of course an example of any label),
并且在 html 的某处有一个 name="HERE" 或 id="HERE" 标签（“HERE”当然是任何标签的一个例子），
then Javascript can do:
那么 Javascript 可以做到：
if (navigator.userAgent.match(/Chrome|AppleWebKit/)) {
window.location.href = "#HERE";
window.location.href = "#HERE"; /* these take twice */
} else {
window.location.hash = "HERE";
}
Works for me.
为我工作。
回答by quantumSoup
You don't need JS for that.
你不需要JS。
Accessing yourpage.html#jump_to_this_locationwill do. This can be done through a link (<a href="#jump_to_this_location">jump</a>)
访问yourpage.html#jump_to_this_location就行。这可以通过链接 ( <a href="#jump_to_this_location">jump</a>)
回答by Patrick N.
The rough sketch illustrates using the id attribute in element section to jump to different parts of the page using the anchor in navigation. That is, in your navigation:
粗略的草图说明了使用元素部分中的 id 属性使用导航中的锚点跳转到页面的不同部分。也就是说，在您的导航中：
<li><a href="#id_from_the_desired_jump_to_section"></a></li>
<!DOCTYPE html>
<html>
<head>
<title>Go to section</title>
<style type="text/css">
.navigation {
position: fixed;
background-color: green;
width: 100%;
height: 50px;
margin-top: 0px;
margin-right: 0px;
}
.navigation li {
display: inline;
width: auto;
list-style-type: none;
font-size: 20px;
text-decoration: none;
}
a:hover, {
background-color: white;
}
a: focus {
color: lime;
}
</style>
</head>
<body>
<nav>
<ul class="navigation">
<li><a href="#about">About US</a></li>
<li><a href="#clients">Our clients</a></li>
<li><a href="#branches">Our Offices</a></li>
<li><a href="#samples">Projects</a></li>
<li><a href="#team">The team</a></li>
<li><a href="#contacts">Contact US</a></li>
</ul>
</nav>
<section id="about">
<div class="about" style="background-color: skyblue; height: 500px;">
</div>
</section>
<section id="clients">
<div class="clients" style="background-color: blue; height: 500px;">
</div>
</section>
<section id="branches">
<div class="branches" style="background-color: lime; height: 500px;">
</div>
</section>
<section id="samples">
<div class="samples" style="background-color: olive; height: 500px;">
</div>
</section>
<section id="team">
<div class="about" style="background-color: grey; height: 500px;">
</div>
</section>
<section id="contacts">
<div class="about" style="background-color: gold; height: 500px;">
</div>
</section>
</body>
</html>
回答by Ajay-Systematix
Try this (using JavaScript):
试试这个（使用 JavaScript）：
location.hash = "div-Name";
