search

jellekralt / Responsive-Tabs

Responsive Tabs is a jQuery plugin that provides responsive tab functionality. The tabs transform to an accordion when it reaches a CSS breakpoint. You can use this plugin as a solution for displaying tabs elegantly on desktop, tablet and mobile.
http://jellekralt.github.io/Responsive-Tabs/
MIT License
531 stars 228 forks source link

Scrolling when scrollToAccordion set to false #153

Closed eyekanspele closed 5 years ago

eyekanspele commented 5 years ago

I have tried the 3 options as false

scrollToAccordionOnLoad: false, scrollToAccordion: false, scrollToAccordionOffset: false

However whenever I active an accordion, the browser scrolls erratically. I suspect the href="#" is causing it to try and scroll to the position where the id="" is when it is clicked, so as one panel closes, and the new one opens, it scrolls to where the panels was when it was clsoed.

Example: 2 panels. 1st panels is 1000px in height, 2nd panel is 300px, and 3rd panels is 500px.

If you first open panel one, it pushes panel 2 down 1000px. Now when you open Panel 2, the first panel collapses by 1000px (and the 2nd panel slides up 1000px), but then the browser try to scroll down to where the second panel was, which was ~1000px lower.

Now if I set the 3 options all to true: scrollToAccordionOnLoad: true, scrollToAccordion: true, scrollToAccordionOffset: true

The browser seems to try and scroll down, but then after scrolls to the correct position. This is a little jumpy, but at least it scrolls to the correct position.

pdrittenhouse commented 5 years ago

I'm having this same issue.

eyekanspele commented 5 years ago

I forgot about this.

I found out, there was a jquery plugin that had a smooth scroll function that was activated by any anchor with an href attribute that started with # (It was not obvious because another developer that works on the website changed the smooth scroll plugin's animation to 0ms to essentially disable it eyeroll).

I am closing the issue as this is not an issue with the Responsive-Tab plugin.