jquery - 使用 rel 属性作为 anchor 链接

Question

我想知道是否可以使用 rel 属性作为 anchor 链接。例如，html 将如下所示:

<a href="http://www.example.com/portfolio" rel="#portfolio">Portfolio</a>
<div id="portfolio">Content goes here></div>

单击链接时，当前页面将滚动到内容，而不是将用户带到该页面。

想法是将所有或大部分网站内容放在主页上，并使用顶部的导航链接到下面的内容。但是，如果未启用 javascript，用户将被带到适当的页面。

此外，我正在使用此 fiddle (http://jsfiddle.net/5z3NH/1/) 中的代码来激活平滑滚动。我想对其进行调整以适应我上面描述的情况。

提前致谢!

[编辑]

我已经更新了我的 Fiddle尝试 Jukka 建议的方法，即从 href url 中提取路径并滚动到页面下方匹配的 div。它还没有用，因为我最终链接到 URL，但也许我可以获得更多指示。

Answer 1

你可以试试这个。

启用 JS

<nav class="script">
  <ul>
    <li><a href="#" data-rel="s1">Link 1</a>
    </li><li><a href="#" data-rel="s2">Link 2</a>
    </li><li><a href="#" data-rel="s3">Link 3</a>
    </li><li><a href="#" data-rel="s4">Link 4</a>
    </li><li><a href="#" data-rel="s5">Link 5</a>
    </li>
  </ul>
</nav>


<section id="s1">

</section>

<section id="s2">

</section>

...

---

$(function () {
  $('nav li a').click(function(e) {
    e.preventDefault();
    $('html, body').stop().animate({ scrollTop: $('#'+ $(this).data('rel')).offset().top + 'px' }, 1000, 'easeOutSine');
  });
});

JS 禁用

<noscript>
  <style>.script { display: none; }</style>

  <nav class="noscript">
    <ul>
      <li><a href="#home">Link 1</a>
      </li><li><a href="#sevices">Link 2</a>
      </li><li><a href="#portfolio">Link 3</a>
      </li><li><a href="#about">Link 4</a>
      </li><li><a href="#contact">Link 5</a>
      </li>
    </ul>
  </nav>
</noscript>

或者像您在 fiddle 中尝试过的通用解决方案

<nav>
  <ul>
    <li><a href="http://www.example.com/#home">Link 1</a>
    </li><li><a href="http://www.example.com/#sevices">Link 2</a>
    </li><li><a href="http://www.example.com/#portfolio">Link 3</a>
    </li><li><a href="http://www.example.com/#about">Link 4</a>
    </li><li><a href="http://www.example.com/#contact">Link 5</a>
    </li>
  </ul>
</nav>

---

$(function () {
  $('a').click(function(e) {
    e.preventDefault();
    var target = $($(this).attr('href').replace('http://www.example.com/', ''));        
    $('html, body').animate({scrollTop: target.offset().top + 'px' }, 1000);        
  });
});

您的 FIDDLE 已更新。