sample081.html

<!DOCTYPE html>
<html lang="en">
<body>
    <style>
        li
        {
            padding-bottom: 500px;
        }
    </style>
    <ul>
        <li><a href="#" class="next">Next</a></li>
        <li><a href="#" class="next">Next</a>/<a href="#" class="prev">Previous</a></li>
        <li><a href="#" class="next">Next</a>/<a href="#" class="prev">Previous</a></li>
        <li><a href="#" class="prev">Previous</a></li>
    </ul>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <script>  (function ($) {
      $('.next')
            .click(function () { $('html, body').animate({ scrollTop: $(this).parent().next().find('a').offset().top }, 1000); });
      $('.prev')
          .click(function () { $('html, body').animate({ scrollTop: $(this).parent().prev().find('a').offset().top }, 1000); });
  })(jQuery); </script>
</body>
</html>