jQuery smooth scrolling anchor navigation

Question

I have a list based navigation at the top of my site, it's a one page site so the a hrefs are anchors to sections on the page. I've used this code: jQuery smooth scroll positioning doesn't work

Navigation:

<nav>
   <ul class="navigation">
      <li class="navigation"><a class="scroll" href="#about-me">about me</a>
      </li>
      <li class="navigation"><a class="scroll" href="#my-skills" >my skills</a>
      </li>
      <li class="navigation"><a class="scroll" href="#portfolio">portfolio</a>
      </li>
      <li class="navigation"><a class="scroll" href="#contact">contact</a>
      </li>    
   </ul>
</nav>

Section/div:

<section id="contact"> <!---->
    <div class="panel" id="contact">
        <h2>Contact</h2>
    </div>
</section> <!---->

Javascript used:

<script type="text/javascript">
$(document).ready(function(){
    $('a[href^="#"]').on('click',function (e) {
        e.preventDefault();

        var target = this.hash;
        $target = $(target);

        $('html, body').stop().animate({
            'scrollTop':  parseInt($target.offset().top,10);
        }, 900, 'swing', function () {
            window.location.hash = target;
        });
    });
});
</script>

The anchor works and it jumps to the section, but with no scrolling?

Consider using [fullpage.js](http://alvarotrigo.com/fullPage/) for it. — Alvaro, Aug 11 '15 at 09:00
There shouldn't be a `;` after `'scrollTop': parseInt($target.offset().top,10)` — Deepak Kamat, Apr 04 '19 at 12:47

score 7 · Accepted Answer · answered Aug 05 '15 at 12:28

There are few problems in your code:

You haven't closed your lis properly

You have same ids for section and div which is invalid

<section id="contact"> <!---->
    <div class="panel" id="contact">

So correcting the above mistakes I would like to add one more change in your JS which is:

No need to add parseInt to scrollTop. You can directly go with the offset().top

DEMO

$(document).ready(function(){
    $('a[href^="#"]').on('click',function (e) {
        e.preventDefault();
        var target = this.hash;
        $target = $(target);
        $('html, body').stop().animate({
            'scrollTop':  $target.offset().top //no need of parseInt here
        }, 900, 'swing', function () {
            window.location.hash = target;
        });
    });
});

That works perfectly, thanks for pointing out the errors too! — user3574766, Aug 05 '15 at 12:50

score 3 · Answer 2 · answered Aug 05 '15 at 12:20

Try this code:

 <script type="text/javascript">
    $(document).ready(function(){
    $('a[href^="#"]').on('click',function (e) {
        e.preventDefault();

        var target = this.hash;
        var $target = $(target);
        var scroll;

        if($(window).scrollTop()==0){
            scroll =  ($target.offset().top) - 160
        }else{
            scroll =  ($target.offset().top) - 60
        }
        $('html, body').stop().animate({
            'scrollTop': scroll
        }, 900, 'swing', function () {
            //window.location.hash = target;
        });
    });
});
</script>

That works perfectly! however my nav is set to height:10vh; to make sure the nav doesnt go over the the h2 title i've given it padding-top:10vh; when scrolling back up it scrolls to so the nav is at the top of the div meaning I get an unwanted 10vh gap, how can I resolve that? — user3574766, Aug 05 '15 at 12:30

jQuery smooth scrolling anchor navigation

2 Answers2