Question

所以我是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（），但它对我不起作用:(

先谢谢你们！

Answer 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/

Answer 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/

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

单击链接后存储HREF值

2 个答案: