FAQ: scroll down when question is clicked

Ask the Community Customization
1

Hi @Max

I could use a JS that scrolls up when the question is clicked.
So the question is always aligned at the top. Is that possible?

grafik
grafik894Ă—758 45.8 KB

grafik
grafik849Ă—765 42.2 KB

2 Likes
3

Hi there, @Sina :waving_hand:

Currently, if you choose a specific question, the widget scrolls up to it a bit by default and this question is always displayed at the top:


Could you please describe your idea in more detail?

2 Likes
4

Hi @Max
No problem. You’re right. The widget scrolls up a bit. But that’s not enough for me if the answer contains more content. Check out my account. I’ve converted the FAQ widget into a nice pricing table (answer area). It would be great if it scrolled up a bit more.

2 Likes
5

I’ve checked your test widget and see that the scroll moves up to the highest point when clicking the question.


Could you please double-check it?

2 Likes
6

test again, now with the correct widget width :blush:

2 Likes
7

Hmm, the scroll still moves to the highest position:

2 Likes
8

Hmm, It doesn’t work for me. I’ve tried Chrome and Firefox.

2 Likes
9

Ah, it seems there was some misunderstanding!

From your screencast, I see the scroll was at the top position and then you’ve clicked on the 3rd question and the scroll hasn’t moved. You want the scroll to move down when clicking on the question below, am I right?

2 Likes
10

@Max Maybe you meant it the other way around. I wrote “scroll up” but meant “scroll down.” :face_with_peeking_eye:

2 Likes
11

Yep, got it! I’ll check with the devs if anything can be done :slightly_smiling_face:

1 Like
12

@Max Not just for the third question. For everyone.
I’ve updated the widget. Take a look at the last question. Only three lines of the answer are visible.

grafik
grafik782Ă—832 33.5 KB

2 Likes
13

Okay, our devs will try to customize the widget this way for all questions :slightly_smiling_face:

1 Like
14

Hi @Sina :waving_hand:

We’ve added this script to the Custom JS field of your widget:

/* scroll opened question into view */
document.addEventListener('click', (e) => {
  const faqItem = e.target.closest('.eapps-faq-content-category-item');
  if (faqItem) {
    setTimeout(() => {
      faqItem.scrollIntoView({ behavior: 'smooth', block: 'start' });
    }, 300);
  }
});

Please check it out and let me know if you like the result :wink:

1 Like
15

Hi @Max very nice this script. Thank you for this. :folded_hands:

I’ll test it to understand it.
Maybe I can fine-tune it a bit, because it scrolls a bit too far down. The question is being over-scrolled.

2 Likes
16

@Sina Do you mean the cases, when the scroll moves a bit lower than expected and the question disappears, but in a second it shows up again, right?

2 Likes
17

Ah, I see now, thanks!

I’ll double-check it with the devs :slightly_smiling_face:

1 Like
18

The script is working correctly, but the questions got cropped because of your website’s menu. The new script adds some padding, and the questions don’t disappear now :slightly_smiling_face:

/* scroll opened question into view */
const topBannerHeight = 37;

document.addEventListener('click', (e) => {
  const faqItem = e.target.closest('.eapps-faq-content-category-item');
  if (faqItem) {
    setTimeout(() => {
      const faqItemRect = faqItem.getBoundingClientRect();
      
      window.scrollTo({
        top: faqItemRect.top + window.scrollY - topBannerHeight,
        behavior: 'smooth',
      });
    }, 300);
  }
});

Could you please check it?

2 Likes
19

@Max now is PERFECT ! Thanks :folded_hands: :hugs:

3 Likes
20

Great, you’re very welcome :wink:

1 Like