單擊鏈接后存儲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