Anchors don't work

[xCeLeSx]

Hi guys,

When i'm using Butter.js any anchor on website don't work :(

Could you help me?
Any issues in console :(

Link to preview
https://osiedle-wiklinowe.pl/test/

[vnxcius]

same issue

[Giorgi-dl1]

I don't know if you have solved this issue, but here is the solution:
I updated butter's wrapperUpdate function to following:

wrapperUpdate: function (targetOffset) {
  if (targetOffset) {
    document.scrollingElement.scrollTop = targetOffset;
  }
  var scrollY =
    document.scrollingElement != undefined
      ? document.scrollingElement.scrollTop
      : document.documentElement.scrollTop || 0.0;

  this.wrapperOffset += (scrollY - this.wrapperOffset) * this.wrapperDamper;

  this.wrapper.style.transform =
    "translate3d(0," + -this.wrapperOffset.toFixed(2) + "px, 0)";
}

And then you can call it like this:

const anchorLinks = document.querySelectorAll(".anchor_link");

anchorLinks?.forEach((link) => {
link.addEventListener("click", (e) => {
e.preventDefault();
const refId = e.currentTarget.href.split("#")[1];
const targetElement = document.querySelector(#${refId});

  if (targetElement) {
    const targetOffset = targetElement.offsetTop;
    const scrollContainer = document.querySelector("#body");

    if (scrollContainer) {
      butter.wrapperUpdate(targetOffset);
    }
  }
});

});

[rudrathegreat]

I don't know if you have solved this issue, but here is the solution: I updated butter's wrapperUpdate function to following:

wrapperUpdate: function (targetOffset) {
  if (targetOffset) {
    document.scrollingElement.scrollTop = targetOffset;
  }
  var scrollY =
    document.scrollingElement != undefined
      ? document.scrollingElement.scrollTop
      : document.documentElement.scrollTop || 0.0;

  this.wrapperOffset += (scrollY - this.wrapperOffset) * this.wrapperDamper;

  this.wrapper.style.transform =
    "translate3d(0," + -this.wrapperOffset.toFixed(2) + "px, 0)";
}

And then you can call it like this:

const anchorLinks = document.querySelectorAll(".anchor_link");

anchorLinks?.forEach((link) => { link.addEventListener("click", (e) => { e.preventDefault(); const refId = e.currentTarget.href.split("#")[1]; const targetElement = document.querySelector(#${refId});

  if (targetElement) {
    const targetOffset = targetElement.offsetTop;
    const scrollContainer = document.querySelector("#body");

    if (scrollContainer) {
      butter.wrapperUpdate(targetOffset);
    }
  }
});

});

thanks so much for the solution! I'm new to javascript. by any chance, could you send the entire butter.js file, because I'm having the same problem as well

[rudrathegreat]

also @Giorgi-dl1, i had a question, what if your anchor tag uses an onclick function rather than a typical href parameter instead?