单击链接后存储 HREF 值答案

【问题标题】：Storing HREF value after clicking link单击链接后存储 HREF 值
【发布时间】：2014-09-27 00:07:34
【问题描述】：

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

此外，布朗尼指出任何人都可以给我建议，让页面慢慢向下滚动到正确的位置。我尝试使用 .scrollTo() 但它对我来说不能正常工作:(

提前谢谢大家！

【问题讨论】：

它会正常工作的！ jsfiddle.net/kunknown/F6ur8
您的 jQuery 是在文档就绪调用中还是在文档末尾？
I tried using .scrollTo() but it didn't work properly for me：什么不适合你？它做了什么？

标签： javascript jquery html href

【解决方案1】：

为什么还需要存储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/

【讨论】：

【解决方案2】：

这里对 LorDex 的回答稍作修改，为您提供反弹效果：

$(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)
        });

    });
});

http://jsfiddle.net/fd7U7/3/

首先计算它是向上还是向下滚动，它会在任一方向反弹。

【讨论】：

我试过这段代码，效果很好！只是一个简单的问题，似乎当我单击顶部的链接时，被单击的页面的相应部分会在页面向下移动到该部分之前闪烁一瞬间。有关如何解决此问题的任何建议？
@JoeyO：不确定你的意思。你能创建一个演示这个问题的小提琴吗？我帖子中的小提琴是否显示了这种行为（我没有看到，但也许我误解了你在说什么）。