Javascript to make the page jump to a specific location
I there a way in javascript to m开发者_StackOverflow中文版ake the page jump to a specific location on the page, such as
<span id='jump_to_this_location'></span>
I do not want to re=load page,
2020 Answer
A simple and modern way to do this would be like this:
document.getElementById("jump_to_this_location").scrollIntoView({behavior: 'smooth'});
The behaviour: 'smooth' argument makes the jump... well... smooth. Which is something probably most of you want.
You can set the location.hash property, like this:
window.location.hash = "jump_to_this_location";
You can give it a try here.
If you use jQuery it's pretty simple here is some sample code
Bellow is the #nav where I stored all the clickable links to the articles in this example
Note: I used the goto attribute(custom) to pass the ID for the target Article
<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.
<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.
<script>
$(document).ready(function(){
$('#nav div').click(function(){
var id = "#" + $(this).attr('goto');
var top = $(id).position().top;
$('html').scrollTop(top);
});
});
</script>
javascript jquery
This can be accomplished by first creating an anchor for the page landing spot using HTML.
<a name="jumpHere">somewhere</a>
Once you have the landing site, simply use the JavaScript:
window.location = 'yoursite.html#jumpHere';
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),
then Javascript can do:
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.
You don't need JS for that.
Accessing yourpage.html#jump_to_this_location will do. This can be done through a link (<a href="#jump_to_this_location">jump</a>)
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:
<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>
Along with the "#", you might want this CSS attribute: This one "jumps" to the target:
scroll-behavior: auto;
This one smoothly scrolls the screen until it gets to the target:
scroll-behavior: smooth
Reference: https://www.w3docs.com/learn-css/scroll-behavior.html
Caution: It seems to be a relatively new feature, so it may not be available on all Browsers.
Came here trying to find out why my page (1) didn't scroll at all when going to page.com/#hash and (2) why it wasn't scrolling into the correct position when using scrollIntoView(). This solved both my issues, so someone might find it useful too:
window.addEventListener("DOMContentLoaded", () => {
const hash = window.location.hash;
window.location.hash = "";
window.location.hash = hash;
});
If this still doesn't scroll into the correct position then I think that adding a timeout before setting the hash again could do the trick, though I'm not 100% sure on that, someone might be able to correct me here.
Try this (using JavaScript):
location.hash = "div-Name";
加载中,请稍侯......
精彩评论