Javascript 单击链接后存储HREF值_Javascript_Jquery_Html_Href

Javascript 单击链接后存储HREF值

javascript jquery html

Javascript 单击链接后存储HREF值,javascript,jquery,html,href,Javascript,Jquery,Html,Href,因此，我对JavaScript/jQuery有点陌生，我一直在尝试在我的网站（www.joeyorlando.me）中一点一点地实现它当前我试图解决的问题是，当用户单击页面顶部的一个链接时（即，用户单击“背景”，页面慢慢向下滚动到“背景”），我的网站会慢慢向下滚动到适当的部分。理想情况下，我甚至希望滚动功能稍微超过部分的顶部（可能是50-100px），然后平滑地“反弹”到部分的顶部我的想法是存储单击链接的HREF值，然后使用此HREF值使页面向下滚动到该部分。我现在只关注第一部分，存储点击链

因此，我对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>

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

提前感谢大家！

为什么还要存储href

使用以下命令：

$(document).ready(function() {
    $('ul li a').click(function() {
        var id = $(this).attr('href');
        $('html, body').animate({
            scrollTop : $(id).offset().top
        }, 500);
    });
});

这里拉小提琴：

这里对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)
        });

    });
});

通过首先计算它是否向上或向下滚动，它将向任意方向反弹。

它将正常工作！！您的jQuery是在文档就绪调用中，还是在文档末尾？

我尝试使用.scrollTo（），但它对我来说没有正常工作。

：什么是“不正常的”对你来说？它做了什么？我试过这个代码，效果很好！只是一个简单的问题，似乎当我点击顶部的链接时，被点击的页面的相应部分会在页面向下移动到该部分之前闪烁一秒钟。关于如何解决这个问题，有什么建议吗？@JoeyO:不确定你的意思。你能相信吗吃了一把小提琴就说明了问题？我帖子中的小提琴是否显示了这种行为（我没有看到，但可能我误解了你所说的）。

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

    });
});