Anchor links (jump links) scroll down too far

Beaver Builder
1

When I add an anchor (jump link) on a page (same page, or to a different page), the position where you end up after clicking it is always passed the intended section. Just to be clear (I hope :slight_smile: — the link works but it always goes passed where I actually want it to go (and where I have the anchor).

I’ve seen fixes via Google search but not for working within Beaver Builder.

Thanks for any tips on this.

2

Hi there,

What you need to do is “offset” the landing position. Here’s an article in the docs that describes how. Smooth scrolling tweaks with code | Beaver Builder Knowledge Base

3

Thank you for your quick reply! Will give it a go.

4

I added the jQuery found on the provided link (above) and set the offset to 0 but it offsets to the same place as before which is about ~140px too low:

jQuery(function () {
  if ("undefined" != typeof FLBuilderLayoutConfig) {
    FLBuilderLayoutConfig.anchorLinkAnimations.offset = 0;
  }
});

I’ve checked in multiple browsers, Chrome, FF & Safari (clearing all cache) with the same result on my laptop. On mobile, it seems to work fine though.

5

As a test to make sure it’s working at all, what happens if you make the offset = 100 does it change where the scroll stops?

6

Hi there,

I have had it set to offset = 100
and I do not see much if any difference. Seems to stop at the same place. Not knowing whether you can even set a negative number, I tried that too ( offset = -50 ) and it seemed to make no difference.

This has always been the case when using Beaver Builder. I would sometimes add the anchor to an area above where I wanted it to end up, and sometimes that would work.

Right now I have this in place (scroll still going too far down). This is from the BB Smooth scrolling tweaks page:

jQuery(function ($) {
  var win = $(window);

  function bbScroll() {
    if ("undefined" != typeof FLBuilderLayoutConfig) {
      var offset = 100;

      if ("undefined" === typeof FLBuilderLayout) {
        return;
      }

      if ( FLBuilderLayout._isMobile() && win.width() < 768 ) {
        offset = 0;
      }  
      if ( FLBuilderLayout._isMobile() && win.width() < 992 ) {
        offset = 100;
      }  

      if ($("body.admin-bar").length > 0) {
        offset += 0;
      }

      FLBuilderLayoutConfig.anchorLinkAnimations.duration = 1000;
      FLBuilderLayoutConfig.anchorLinkAnimations.easing = "swing";
      FLBuilderLayoutConfig.anchorLinkAnimations.offset = offset;
    }
  }

  bbScroll();
  win.on("resize", bbScroll);
});

And if it’s not completely obvious, I do not know jQuery or javascript beyond a directed ‘copy-paste’ …