Use rel attribute as anchor link

Question

I'm wondering is it's possible to use a rel attribute as an anchor link. For instance, the html would read as follows:

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

When the link is clicked, instead of taking the user to the page, the current page will scroll to the content.

The idea is to have all or most site content on the home page and use the navigation at the top to link to the content down below. However, if javascript is not enabled, the user will be taken to the appropriate page.

Additionally, I'm using the code in this fiddle (http://jsfiddle.net/5z3NH/1/) to activate smooth scrolling. I'd like to adapt it to suit the situation I described above.

Thanks in advance!

[Edit]

I've updated my Fiddle to try a method Jukka suggested, that is, extracting the path from the href url and scrolling to a matching div down the page. It's not working yet, in that I end up linking to the URL, but maybe I can get a few more pointers.

Answer 1

You could try this.

JS enabled

<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 disabled

<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>

Or universal solution like you tried in your 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);        
  });
});

Your FIDDLE updated.

Answer 2

No, that would not make sense and would not work. The rel attribute has a specific meaning, though it is largely ignored by browsers. It is not meant to affect and and it does not affect the destination address of a link.

If you just want to move to an element inside the page, you can simply use <a href="http://www.example.com/portfolio#portfolio">Portfolio</a>. No JavaScript needed.

If you instead wish to hide other content and show just one part of a page, in a “single-page application” manner, then you (in practice) need JavaScript in an essential way. To make the page still work without JavaScript (perhaps especially considering search engines), you can do much like in your question, but with a different attribute carrying the information, e.g.

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

with an onclick event handler set to use the data-part attribute in a suitable way and to abort normal link processing.

In fact, you could probably dispense with such an extra attribute, with a suitable naming scheme. If your id attribute values match the last part of the URL, as in the example, your script could simply read the path part of the href attribute value – you that value as such, if you use normal relative URLs, as in href=portfolio.