单击链接后存储HREF值

Question

so I'm kinda new to JavaScript/jQuery and I've been trying to implement it little by little into my website (www.joeyorlando.me). 所以我是JavaScript / jQuery的新手，我一直在尝试将它一点一点地应用到我的网站（www.joeyorlando.me）。

The current problem I'm trying to tackle is having my site slowly scroll down the page to the proper section when a user clicks on one of the links at the top of the page (ie. the user clicks on "background" and the page slowly scrolls down to "background"). 我正在尝试解决的当前问题是当用户点击页面顶部的一个链接时（即用户点击“背景”和页面），我的网站会慢慢向下滚动页面到正确的部分慢慢向下滚动到“背景”）。 Ideally, I would even like the scroll function to go a little past the top of the section (maybe by 50-100px) and then smoothly "bounce" back to the top of the section. 理想情况下，我甚至希望滚动功能稍微超过该部分的顶部（可能是50-100px），然后顺利地“反弹”回到该部分的顶部。

My idea was to store the HREF value from the clicked link, and then use this href value to have the page scroll down to that section. 我的想法是存储来自点击链接的HREF值，然后使用此href值让页面向下滚动到该部分。 I'm focusing on just the first part now, of storing the clicked link's HREF value and this is what I have so far but it is not working properly, the console keeps telling me that HREF is not defined when I try to check the value of HREF after clicking one of the links. 我现在只关注第一部分，存储点击链接的HREF值，这是我到目前为止但它没有正常工作，控制台一直告诉我，当我尝试检查值时，未定义HREF单击其中一个链接后的HREF。

HTML code 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 code JavaScript代码

 $('nav ul li a').click(function() {
     window.location.href =  $(this).attr('href');
    var href =  $(this).attr('href');
 });

Also, brownie points to anyone whom can give me suggestions on having the page slowly scroll down to the proper location. 此外，布朗尼指向任何可以给我建议让页面慢慢向下滚动到正确位置的人。 I tried using .scrollTo() but it didn't work properly for me :( 我尝试使用.scrollTo（），但它对我来说不正常:(

Thanks in advance guys! 先谢谢你们！

Answer 1

Why do you need to store href anyway? 为什么你还需要存储href？

Use this: 用这个：

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

fiddle here: http://jsfiddle.net/fd7U7/ 在这里小提琴： http ： //jsfiddle.net/fd7U7/

Answer 2

Here's a slight modification to LorDex's answer to give you the bounce effect: 这是对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/ http://jsfiddle.net/fd7U7/3/

It will bounce in either direction by first calculating whether or not it's scrolling up or down. 它将通过首先计算它是向上还是向下滚动来向任一方向反弹。

单击链接后存储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