单击链接后存储HREF值

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 个解决方案

解决方案1
1 2014-08-04 13:44:52

解决方案2
0 2014-08-04 13:58:27

单击链接后存储HREF值

问题描述

2 个解决方案

解决方案1 1 2014-08-04 13:44:52

解决方案2 0 2014-08-04 13:58:27

解决方案1
1 2014-08-04 13:44:52

解决方案2
0 2014-08-04 13:58:27