使用 rel 属性作为锚链接

Question

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

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

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

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

此外，我正在使用此小提琴 (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>

或者像你在小提琴中尝试过的通用解决方案

<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 已更新。

Answer 2

不，那没有意义，也不会起作用。 rel 属性具有特定含义，尽管它在很大程度上被浏览器忽略。这并不意味着影响，也不会影响链接的目标地址。

如果你只是想移动到页面内的一个元素，你可以简单地使用<a href="http://www.example.com/portfolio#portfolio">Portfolio</a>。无需 JavaScript。

如果您希望以“单页应用程序”的方式隐藏其他内容并显示页面的一部分，那么您（实际上）需要以基本方式使用 JavaScript。为了使页面在没有 JavaScript 的情况下仍然可以工作（也许特别是考虑到搜索引擎），您可以在您的问题中做很多事情，但使用不同的属性来携带信息，例如

<a href="http://www.example.com/portfolio" data-part="portfolio">Portfolio</a>

将onclick 事件处理程序设置为以适当的方式使用data-part 属性并中止正常的链接处理。

事实上，您可以通过适当的命名方案来省去这样一个额外的属性。如果您的 id 属性值与 URL 的最后部分匹配，如示例中所示，则您的脚本可以简单地读取 href 属性值的路径部分——如果您使用普通的相对 URL，您的值就是这样，如在href=portfolio。