Sliding effect on anchor links

Question

I have a page Onepage and the anchor links of the menus when clicked them only "jump" to the screen section further down, but I wanted them to slide smoothly up to the intended anchoring section.

I tried to put the transition via CSS and was unsuccessful, I don’t know if there’s no way to do this via CSS, or if I’m putting the class with the transition in the wrong place.

<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
    <ul class="nav navbar-nav navbar-right">
        <li>
            <a href="#contact" style="transition: all .25s linear;">Contato</a>
        </li>
    </ul>
</div>

Answer 1

Unfortunately this is not possible to be done using CSS, to achieve this desired effect you will need to use Javascript/jQuery.

Here’s an example below of how you can do this using jQuery, and you also have a JSFIDDLE LIVE EXAMPLE.

Well, first for the jQuery code below to work it is necessary to implement the jQuery Library, before closing the tag </head> of your website (if you have not already implemented it).
For that you have to add the following line of code:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>

Then you can enter the jQuery code that will handle the smooth scroll effect for the anchor link, which can also be implemented right after this code line above.
Everything together will be like this:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>

<script>
var $doc = $('html, body');
$('a').click(function() {
    $doc.animate({
        scrollTop: $( $.attr(this, 'href') ).offset().top
    }, 500);
    return false;
});
</script>

Note: The jQuery code above was created pointing to the tag <a>, but the recommended would be to create a class specifies only to handle with this, for example class="scrollSuave" and add this class to the links you want this effect to be applied, for example:

<a href="#contact" class="scrollSuave">Contato</a>
<a href="#about" class="scrollSuave">Contato</a>
etc ...

And of course, also make this modification in code jQuery by pointing it now to the class="scrollSuave" in this line:

$('.scrollSuave').click(function() {

This way we are only pointing this script to the links we want the effect to be applied and not to all links <a>.

Here’s a link with an example: http://jsfiddle.net/qss4y1oe

Answer 2

I do it using jQuery

var top = $('#contato').offset.top();

$(window).animation({
    scrollTop: top, // Separa condições.
}, 300);