scrollIntoView() with fixed header

Question

This is probably a simple question but I need some help.

I have this code:

var lastitem='';
(function($) {

var allPanels = $('.accordion> dd').hide();

$('.accordion > dt > a').click(function() {
    allPanels.slideUp();
    if ($(this).text() != lastitem) {
        $(this).parent().next().slideDown();
        lastitem = $(this).text();
        $(this).get(0).scrollIntoView({
            behavior: "smooth", // or "auto" or "instant"
            block: "start" // or "end"
        });
    } else {
        lastitem = '';
    };
    return false;
  });

})(jQuery);

And I have a fixed header, so when I click on the accordion it scrolls into viewport, the problem is my fixed header. I would need to scroll into viewport + 100px from top.

Something like:

$(this).get(0).scrollIntoView({
    behavior: "smooth", // or "auto" or "instant"
    block: "start + 100px" // or "end"
});

That's all, any suggestion? thank you!!

Maybe a duplicate of https://stackoverflow.com/questions/49820013/javascript-scroliintoview-smooth-scroll-and-offset — Jonathan Hamel, Sep 07 '18 at 13:23
Possible duplicate of [Javascript scrolIintoview smooth scroll and offset](https://stackoverflow.com/questions/49820013/javascript-scroliintoview-smooth-scroll-and-offset) — Søren D. Ptæus, Jan 16 '19 at 16:57

score 1 · Answer 1 · edited Nov 20 '19 at 05:54

1

From what I have read from the specification on scrollIntoView, you cannot offset on the block.

edited Nov 20 '19 at 05:54

Bhargav Rao

50,140
28
121
140

answered Sep 07 '18 at 13:17

fllprbt

103
1
10

scrollIntoView() with fixed header

1 Answers1