jquery slide to attribute with specific data attribute value
- by Alex M
Ok, so I have the following nav with absolute urls:
<ul class="nav navbar-nav" id="main-menu">
<li class="first active"><a href="http://example.com/" title="Home">Home</a></li>
<li><a href="http://example.com/about.html" title="About">About</a></li>
<li><a href="http://example.com/portfolio.html" title="Portfolio">Portfolio</a></li>
<li class="last"><a href="example.com/contact.html" title="Contact">Contact</a></li>
</ul>
and then articles with the following data attributes:
<article class="row page" id="about" data-url="http://example.com/about.html">
<div class="one">
</div>
<div class="two"
</div>
</article>
and when you click the link in the menu I would like to ignore the fact it is a hyperlink and slide to the current article based on its attribute data-url.
I started with what I think is the obvious:
$('#main-menu li a').on('click', function(event) {
event.preventDefault();
var pageUrl = $(this).attr('href');
)};
and have tried find and animate but then I don't know how to reference the article with data-url="http://example.com/about.html".
Any help would be most appreciated.
Thanks
