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网址中提取路径并滚动到页面下方的匹配div。它还没有工作，因为我最终链接到URL，但也许我可以得到更多的指针。

Answer 1

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

如果您只想移动到页面内的元素，只需使用<a href="http://www.example.com/portfolio#portfolio">Portfolio</a>即可。不需要JavaScript。

如果您希望隐藏其他内容并且 show 只是一个页面的一部分，以“单页面应用程序”的方式，那么您（在实践中）需要以一种必要的方式使用JavaScript。为了使页面在没有JavaScript的情况下仍然可以工作（可能特别考虑搜索引擎），你可以在你的问题中做很多事情，但是使用带有信息的不同属性，例如。

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

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

事实上，你可以通过合适的命名方案省去这样一个额外的属性。如果您的id属性值与网址的最后一部分匹配（如示例中所示），则您的脚本可以只读取href属性值的路径部分 - 如果您使用普通值，那么您就是这样的值相对网址，如href=portfolio。

Answer 2

你可以试试这个。

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

使用rel属性作为锚链接

2 个答案: