Thursday, October 17, 2013

jQuery UI accordion Scroll to top

When your jquery accordion has alot of content it tends to scroll the user toward the bottom of the page. If you want to scroll back to the top of the section they opened change your js to look like-a-so.

$(".accordion").accordion({
        activate: function(event, ui){
             var scrollTop = $(".accordion").scrollTop();
             var top = $(ui.newHeader).offset().top;
          //do magic to scroll the user to the correct location
          //works in IE, firefox chrome and safari
             $("html,body").animate({ scrollTop: scrollTop + top -35 }, "fast");
            },
         heightStyle: 'content' ,
        active: false,
         
    });


Stumble Upon CodePyro

4 comments:

Unknown said...

Hi,
Could you show me a working demo for this code, I think this is what I am after.
Thanks a lot

for ict 99 said...

great

Nannie Co Pam said...

Hi, Great.. Tutorial is just awesome..It is really helpful for a newbie like me.. I am a regular follower of your blog. Really very informative post you shared here. Kindly keep blogging. If anyone wants to become a Front end developer learn from JQuery Training in Chennai . or learn thru JQuery Training . or learn thru ES6 Online Training. Nowadays JavaScript has tons of job opportunities on various vertical industry.

Unknown said...

Machine Learning Projects for Final Year machine learning projects for final year

Deep Learning Projects assist final year students with improving your applied Deep Learning skills rapidly while allowing you to investigate an intriguing point. Furthermore, you can include Deep Learning projects for final year into your portfolio, making it simpler to get a vocation, discover cool profession openings, and Deep Learning Projects for Final Year even arrange a more significant compensation.

Python Training in Chennai Project Centers in Chennai

Post a Comment