Smooth scrolling is becoming more common.  The result is not due to flashy, fancy design.  The result is due to the fact nobody likes being lost.  Should a page have an abundant amount of content, using anchors without smooth scrolling will simply jump the user to the anchor.  The user will not know whether they were navigated up, down, or sideways for that matter. All they would know is that they were navigated.  Applying smooth scrolling lets the user know where they are going.  Let’s face it, we aren’t kidnapping users, we are taking them for a drive in the country.  It is acceptable for them to know their way back.

With all of that now made clear, if you are using anchors, you should always implement some sort of smooth scrolling.  The example below is the most succinct way to do just that.  All that is required is to add an anchor tag to navigate from:

<a href="#topOfPage"><span class="glyphicon glyphicon-arrow-up" aria-hidden="true"></span></a>

And then insert an anchor to navigate to:

<a name="topOfPage" id="topOfPage"></a>

As long as the anchor tags are in place, the script will handle the smooth scrolling.  What that means is that you will not need to call a function when the anchor tag is clicked.  This is a one and done method, and the method I prefer over all others.  Remember, KISS…  Here is the script:

$(function() {
    $('a[href*="#"]:not([href="#"])').click(function() {
        if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
            var target = $(this.hash);
            target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
            if (target.length) {
                $('html, body').animate({
                    scrollTop: target.offset().top
                }, 777);
                return false;
            }
        }
    });
});

Note: This method requires jQuery.  Not a big deal, since you are most likely leveraging jQuery already.

That is it and that is all.  Cheers!