Smooth scroll not working Javascript

Question

I am trying to make smooth scroll on my web page.I think that error is in this line but i don't know how to fix it.

a[ id= "menu" ]:target ~ .panel {
  -webkit-transform: translateY( 0px);
  transform: translateY( 0px );
}

I want it to scroll smoothly instead of just jumping to that div. Here is jsfiddle example

Thanks.

Answer 1

You can do it with this code:

$('html,body').animate({
   scrollTop: $("#menu").offset().top
});

DEMO HERE

Answer 2

It adds a smooth scroll effect :

Add this script code in your page

    $(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
            }, 1000);
            return false;
          }
        }
      });

});

Answer 3

You are to trying to scroll your Slider or Section Smoothly, It can be done through animate() or else you can alse try to show your section like:

show({"right":"1000px"}, 1000);

Next way is to use smoothDivScroll()

Source:  http://www.smoothdivscroll.com/    

<script type="text/javascript">
$(document).ready(function () {
    $("#scrollablediv").smoothDivScroll({
        mousewheelScrolling: "allDirections",
        manualContinuousScrolling: true,
        autoScrollingMode: "onStart"
    });
});