PHP Classes

File: jquery_scoll.md

Recommend this page to a friend!
  Classes of Kabir Hossain   PHP CodeIgniter Tips Tricks   jquery_scoll.md   Download  
File: jquery_scoll.md
Role: Auxiliary data
Content type: text/markdown
Description: Auxiliary data
Class: PHP CodeIgniter Tips Tricks
Collection of tips and examples to use CodeIgniter
Author: By
Last change:
Date: 1 month ago
Size: 1,026 bytes
 

Contents

Class file image Download

Assuming you have a button with the id 'button', try this example:

$("#button").click(function() {
    $('html, body').animate({
        scrollTop: $("#elementtoScrollToID").offset().top
    }, 2000);
});

I got the code from the article Smoothly scroll to an element without a jQuery plugin. And I have tested it on the example below.

<html>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
    <script>
        $(document).ready(function (){
            $("#click").click(function (){
                //$(this).animate(function(){
                    $('html, body').animate({
                        scrollTop: $("#div1").offset().top
                    }, 2000);
                //});
            });
        });
    </script>
    <div id="div1" style="height: 1000px; width 100px">
        Test
    </div>
    <br/>
    <div id="div2" style="height: 1000px; width 100px">
        Test 2
    </div>
    <button id="click">Click me</button>
</html>