javascript - 单击链接后存储 HREF 值

标签 javascript jquery html href

所以我对 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);
    });
});

在这里摆弄:http://jsfiddle.net/fd7U7/

关于javascript - 单击链接后存储 HREF 值,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25120009/

相关文章:

javascript - 为什么添加bootstrap后代码不工作

jquery - JQM 弹出窗口未正确显示

javascript - 页面加载时如何更改表单输入的背景颜色?

javascript - 填写文本时按钮移动得很奇怪

javascript - IE8 DOM 转换 XML 并从 jQuery find() 或 filter() 返回任何内容

javascript - 更改最大宽度小于 420px 的浏览器的点击事件 id

html - 如何删除内联/内联 block 元素之间的空间?

javascript - 如何为 Scrapy 在 "yield"内设置异常?

javascript - ontouchstart 与 onmousedown

javascript - jQuery .focus() 回调不起作用