所以我对 JavaScript/jQuery 有点陌生,我一直在尝试一点一点地在我的网站 (www.joeyorlando.me) 中实现它。
当前我要解决的问题是,当用户单击页面顶部的链接之一(即用户单击“背景”页面慢慢向下滚动到“背景”)。理想情况下,我什至希望滚动功能略微超过该部分的顶部(可能 50-100 像素),然后平滑地“反弹”回该部分的顶部。
我的想法是存储单击链接的 HREF 值,然后使用此 href 值让页面向下滚动到该部分。我现在只关注第一部分,即存储点击链接的 HREF 值,这是我目前所拥有的,但它无法正常工作,当我尝试检查该值时,控制台不断告诉我 HREF 未定义单击其中一个链接后的 HREF。
HTML代码
<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 代码
$('nav ul li a').click(function() {
window.location.href = $(this).attr('href');
var href = $(this).attr('href');
});
另外,brownie 指出任何人都可以给我建议让页面慢慢向下滚动到正确的位置。我尝试使用 .scrollTo() 但它对我来说没有正常工作:(
提前谢谢大家!
最佳答案
为什么你仍然需要存储 href?
使用这个:
$(document).ready(function() {
$('ul li a').click(function() {
var id = $(this).attr('href');
$('html, body').animate({
scrollTop : $(id).offset().top
}, 500);
});
});
关于javascript - 单击链接后存储 HREF 值,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25120009/