logo标签列表

点击链接后存储HREF值

javascriptjqueryhtmlhref
4

我有点新于JavaScript/jQuery，一直在尝试逐渐将它们应用到我的网站 (www.joeyorlando.me) 中。

目前我正在解决的问题是，当用户点击页面顶部的链接时（例如，用户点击“背景”），使我的网站缓慢向下滚动到正确的部分。理想情况下，我甚至希望滚动函数能够超过该部分的顶部一点（可能是50-100px），然后平稳地“反弹”回该部分的顶部。

我的想法是存储所点击链接的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()，但是它对我来说没有正常工作 :(

提前感谢大家！

2
它会正常工作的！！http://jsfiddle.net/kunknown/F6ur8/ - Kiran
你的jQuery代码是在document ready调用内部还是在文档末尾？ - j08691
1
我尝试使用 .scrollTo()，但它对我来说没有正常工作。你认为它有什么问题？它做了什么？ - Matt Burland
2个回答
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/

0
这是对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/

它将通过首先计算它是向上滚动还是向下滚动来在任一方向上反弹。

我尝试了这段代码，它运行得非常好！只有一个小问题，当我点击页面顶部的链接时，被点击的相应部分会在页面向下滚动到该部分之前闪烁一下。您有什么解决此问题的建议吗？ - Joey Orlando
@JoeyO：不太确定你的意思。你能否创建一个演示问题的fiddle？我的帖子中的fiddle是否显示了这种行为（我没有看到，但也许我误解了你所说的内容）。 - Matt Burland
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接