scroll the element to the top of page jquery 1 comment


I was needed some functionality ,
where i can scroll the content to top of the page.
I am having many divs which are hidden , and its headings only shown.
I want that on click of that heading , div should open up and should scroll to top.
So here is the function which can help you.

Special Thanks : Anand Dhungav.

 
function auto_scroll(obj){
   // alert($(obj).html());
    if($(obj).text() != ""){
        /*
        var x = Math.round( $(obj).offset().left );
        var y = ( Math.round( $(obj).offset().top))-30;
        */
         var y = (Math.round($(obj).offset().top))-10;
        /*
        alert(x);
        alert(y);
        */
        $('html, body').animate({scrollTop:y},500);
    }
}
 

Usage:

 

On Dom Ready or inside some function .

you can use.

//calling function
 auto_scroll($("#div_"+id));

//assume that div is your element and you are passing its id to some
//function.

 
E.G :
say you have.

<a id="a_1" onclick="pk(this.id)">1</a>
<div id="div_1">
</div>

<a id="a_2" onclick="pk(this.id)">2</a>
<div id="div_2">
</div>

<a id="a_3" onclick="pk(this.id)">3</a>
<div id="div_3">
</div>


SO here on Click of <a> tag , you can call some function ,
explode the number/digit from its id , and then you can pass ,
it to a function.

say..
here 'id' is <div> id and relevant <a> id.
 
function pk(id1){

id1 = id1.split('_');

id = id1[1]; 
// number digit to get id of clicked <a> and to set it for <div>
  
auto_scroll($("#div_"+id)); //this will do your task

}


Share on Facebook




About Pragnesh Karia

Pragnesh Karia, Open Source Enthusiast, Software Professional, Software Developer, Technical Lead ,Magento, Joomla ,Joomla LMS , Moodel LMS ,PHP ,Mysql, Ajax, Javascript, Jquery, Linux, Fan of Open Sources , Annet Technologies , SEO Analyst , Mootools


One thought on “scroll the element to the top of page jquery