Storing HREF value after clicking link
Question
so I'm kinda new to JavaScript/jQuery and I've been trying to implement it little by little into my website (www.joeyorlando.me).
The current problem I'm trying to tackle is having my site slowly scroll down the page to the proper section when a user clicks on one of the links at the top of the page (ie. the user clicks on "background" and the page slowly scrolls down to "background"). Ideally, I would even like the scroll function to go a little past the top of the section (maybe by 50-100px) and then smoothly "bounce" back to the top of the section.
My idea was to store the HREF value from the clicked link, and then use this href value to have the page scroll down to that section. I'm focusing on just the first part now, of storing the clicked link's HREF value and this is what I have so far but it is not working properly, the console keeps telling me that HREF is not defined when I try to check the value of HREF after clicking one of the links.
HTML code
<nav>
<ul>
<li><a href="#about">About</a></li>
<li><a href="#background">Background</a></li>
<li><a href="#research">Research</a></li>
<li><a href="#travels">Travels</a></li>
<li><a href="#contact">Contact Me</a></li>
</ul>
</nav>
<body>
<div id="about"></div>
<div id="background"></div>
<div id="research"></div>
<div id="travels"></div>
<div id="contact"></div>
JavaScript code
$('nav ul li a').click(function() {
window.location.href = $(this).attr('href');
var href = $(this).attr('href');
});
Also, brownie points to anyone whom can give me suggestions on having the page slowly scroll down to the proper location. I tried using .scrollTo() but it didn't work properly for me :(
Thanks in advance guys!
2 answers
solution1
1 2014-08-04 13:44:52
Why do you need to store href anyway?
Use this:
$(document).ready(function() {
$('ul li a').click(function() {
var id = $(this).attr('href');
$('html, body').animate({
scrollTop : $(id).offset().top
}, 500);
});
});
fiddle here: http://jsfiddle.net/fd7U7/
solution2
0 2014-08-04 13:58:27
Here's a slight modification to LorDex's answer to give you the bounce effect:
$(document).ready(function() {
var body = $('html, body');
$('ul li a').click(function() {
var id = $(this).attr('href');
var elem = $(id);
var direction = elem.offset().top > $(document).scrollTop() ? 1 : -1;
body.animate({
scrollTop : elem.offset().top + (50 * direction)
}, 500).promise().then(function() {
body.animate({
scrollTop: elem.offset().top
}, 500)
});
});
});
It will bounce in either direction by first calculating whether or not it's scrolling up or down.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.