#anchor scrolls too far

Bootstrap Studio Help
1

When using an anchor tag …com#login it scrolls past the anchor tag so the user has to scroll back up a few rows. Any ideas?

2

Place it in a better place :slight_smile: Many times they have to be adjusted up/down a bit till it lands where you want it.

3

You could try a little vanilla javascript and increase or decrease the var offset:

document.addEventListener("DOMContentLoaded", function() {
    var offset = 50; // Adjust this value based on the height of your fixed header or desired offset

    document.querySelectorAll('a[href^="#"]').forEach(function(anchor) {
        anchor.addEventListener('click', function(e) {
            e.preventDefault();

            var target = document.querySelector(this.getAttribute('href'));
            if (target) {
                window.scrollTo({
                    top: target.offsetTop - offset,
                    behavior: 'smooth'
                });
            }
        });
    });
});

Kirby

4

You can now do this in pure CSS with the following property:

scroll-padding-top: 20px;
3 Likes
5

can you show an example?

6

You can see scroll margin in action on one of my websites by clicking here.

If you click on one of the blue calendar events, the page will scroll to the description of that event, but because there are sticky items at the top of the screen, I needed to add a “margin” on top of the rows that contains the event info. This is where the scroll-margin rule comes into play. So I created a classes called .se with the scroll margin rules, and then add that class to the rows.

.se {
  scroll-margin: 220px;
}

@media (min-width: 576px) {
  .se {
    scroll-margin: 160px;
  }
}

@media (min-width: 768px) {
  .se {
    scroll-margin: 200px;
  }
}

@media (min-width: 992px) {
  .se {
    scroll-margin: 290px;
  }
}

Because the elements at the top of this website page change in height depending on the screen width, I use different scroll margins at different breakpoints.