1

I have a page with a lot of text and decided to go with a fixed navbar that makes it easier to jump between sections. It works just fine, but instead of having the page jump between divs I'd like to have it scroll up and down.

This is what I have so far;

 <ul>
    <li><a href="#2010">2010</a></li>
    <li><a href="#2009">2009</a></li>
    <li><a href="#2008">2008</a></li>
    <li><a href="#2007">2007</a></li>
    <li><a href="#2006">2006</a></li>
    <li><a href="#2005">2005</a></li>
    <li><a href="#2003">2003</a></li>
    <li><a href="#1999">1999</a></li>
 <ul>

    <div id="2010"></div>
    <div id="2009"></div>
    <div id="2008"></div>``
    <div id="2007"></div>
    <div id="2006"></div>
    <div id="2005"></div>
    <div id="2003"></div>
    <div id="1999"></div>

Also, it it possible to have the li element that directs to the div that is showing be another colour than the other li elements?

user2314737
  • 27,088
  • 20
  • 102
  • 114
mrbandi
  • 11
  • 1
  • I have updated my answer with more pretty HTML content. http://stackoverflow.com/a/26126679/947687 – dizel3d Sep 30 '14 at 17:36

1 Answers1

0

Ok, take it! http://jsfiddle.net/a126cwb3/11/

// handle links with @href started with '#' only
$(document).on('click', 'a[href^="#"]', function(e) {
    // target element id
    var id = $(this).attr('href');

    // target element
    var $id = $(id);
    if ($id.size() === 0) {
        return;
    }

    // prevent standard hash navigation (avoid blinking in IE)
    e.preventDefault();

    // top position relative to the document
    var pos = $(id).offset().top;

    // animated top scrolling
    $('body, html').animate({scrollTop: pos});
});
dizel3d
  • 3,619
  • 1
  • 22
  • 35
  • @mrbandi, It works for me in Chrome. What browser do you use? – dizel3d Sep 30 '14 at 20:03
  • @mrbandi, ok, I see. I have updated my answer for IE too: replaced `$('body')` with `$('body, html')`. – dizel3d Sep 30 '14 at 20:13
  • @dizel32 sorry I was a bit sloppy, it does work, but only partially! when navigating from the top to a div it works fine, but when I try to use the menu to go from a div to another div it bugs out. Any suggestions? Oh, and thanks for your help dizel3d, I really appreciate it! – mrbandi Sep 30 '14 at 20:59
  • @mrbandi, please, publish an example of your problem on http://jsfiddle.net/ – dizel3d Sep 30 '14 at 21:04