[natedeezyParticipant]

Hey X Team,

Hope you’re doing well. I have an issue with my accordions. Upon click the page scrolls up or down (depending on which accordion item). This is a pretty sketchy user experience. I’ve read several other feeds and tried to implement different scripts but nothing seems to stop the scrolling, can you help?

Thanks for your time,
Nate

[natedeezyParticipant]

This reply has been marked as private.

[ChristopherModerator]

Hi there,

Please add following code in Customize -> Custom -> JavaScript :

jQuery(function($){
   var navbarHeight = $('.x-navbar-fixed-top').outerHeight();
   var wpadminbarHeight = $('#wpadminbar').outerHeight();
   console.log(navbarHeight, wpadminbarHeight);

   $('.x-accordion-toggle').on('click', function(){
      $('html,body').stop();
   });
});

Hope that helps.

[natedeezyParticipant]

Sorry. The same abnormal scrolling is still happening.

Here’s a page with Accordions: http://bethelcleveland.net/bssm/about/

If you click through them you’ll see the page scrolls up and down.

Thanks for your time,
Nate

[Paul RModerator]

Hi Nate,

I can’t replicate the issue on my end.

See Video – http://screencast.com/t/MsEe0AUn

Can you try clearing your browser cache then check again.

Thanks

[natedeezyParticipant]

Sorry for not being specific. If you open an accordion item and then, without closing it, open the next accordion item, it doesn’t adjust the browser window so that the title of the newly opened item is at the top of the page. So it feels like the page is scrolling up and down. Is there a way that the open accordion item can be anchored to the top of the page upon click? Sorry for the confusion.

Thanks for your time,
Nate

[LelyModerator]

Hello Nate,

Would you mind updating the code to this:

jQuery(document).ready(function($) {
  $('.x-accordion-toggle').on('click', function(){ 
    var $this = $(this);

    setTimeout(function() {
      $('html, body').animate({
        scrollTop: $this.offset().top - $('.x-navbar').outerHeight()
      }, 300); 
    }, 500);
  });
});

Do let us know how this goes.

[natedeezyParticipant]

Awesome! Thank you so much! This is exactly what I needed.

Also, is there a way I can adjust the hight on the page? The sticky nav cuts off the accordion item title a bit, if it could be slightly lower that would be perfect, either way thanks for your time.

Thanks,
Nate

[Rue NelModerator]

Hello Nate,

To adjust the height and avoid the sticky nav from getting cut off, please update the JS code and make use of this code instead:

jQuery(document).ready(function($) {
  $('.x-accordion-toggle').on('click', function(){ 
    var $this = $(this);

    setTimeout(function() {
      $('html, body').animate({
        scrollTop: $this.offset().top - 120
      }, 300); 
    }, 500);
  });
});

Please notice that I replaced the code $('.x-navbar').outerHeight() with an actual number of pixels. If 120 is not enough, you can adjust it to the nearest number that suits best.

[Author]

Posts