Anchor link to jump on same page not working

[MinSomai]

this is not working, remove luxy and this works.

<a href="#jump">Jump</a> <p id="jump">Jump here</a>

[packytagliaferro]

I am also having this issue. I have the site wrapped in one div with `id="luxy". The demo site does appear to work though if I provide a hash in the url with an ID though.

[ArnaudVerpouckeDeveloper]

I experience exactly the same problem. The exact same problem occurs also with another library 'butter.js', which does the same (smooth/ease scrolling).

Only disabling the plugin makes the on-page-anchor tags work. But having both, does not seem to be a possibility.

Details: when you click on an anchor tag which is linked to an id on the same page, nothing happens. Only the url changes, but the position remains the same.

[ghost]

I was able to fix this by including this function:

jumpTo = (obj) => {
    scrollTo({
        top: document.querySelector(obj).offsetTop,
        left: 0,
        behavior: 'smooth'
    });
    window.location = `${obj}`;
};

And modifying the "a" tag like so:

<a onclick="jumpTo('#home')" class="class-name" href="#home">Link Text</a>

However, with this solution, it is not possible to send a link and directly go to a specific spot in the page unless you use a separate function like this one:

//make sure luxy is initiated before this function is called
window.addEventListener("load", () => {
    if(window.location.href.split("#")[1] != null) {
            jumpTo(`#${window.location.href.split("#")[1]}`);
    };
});

Note: I haven't tested this on my site as it has a load animation which doesn't let the user scroll.

[FelixLttks]

I was able to fix this by including this function:

jumpTo = (obj) => {
    scrollTo({
        top: document.querySelector(obj).offsetTop,
        left: 0,
        behavior: 'smooth'
    });
    window.location = `${obj}`;
};

And modifying the "a" tag like so:

<a onclick="jumpTo('#home')" class="class-name" href="#home">Link Text</a>

However, with this solution, it is not possible to send a link and directly go to a specific spot in the page unless you use a separate function like this one:

//make sure luxy is initiated before this function is called
window.addEventListener("load", () => {
    if(window.location.href.split("#")[1] != null) {
            jumpTo(`#${window.location.href.split("#")[1]}`);
    };
});

Note: I haven't tested this on my site as it has a load animation which doesn't let the user scroll.

true hero

[haroldao]

I was able to fix this by including this function:

jumpTo = (obj) => {
    scrollTo({
        top: document.querySelector(obj).offsetTop,
        left: 0,
        behavior: 'smooth'
    });
    window.location = `${obj}`;
};

And modifying the "a" tag like so:

<a onclick="jumpTo('#home')" class="class-name" href="#home">Link Text</a>

However, with this solution, it is not possible to send a link and directly go to a specific spot in the page unless you use a separate function like this one:

//make sure luxy is initiated before this function is called
window.addEventListener("load", () => {
    if(window.location.href.split("#")[1] != null) {
            jumpTo(`#${window.location.href.split("#")[1]}`);
    };
});

Note: I haven't tested this on my site as it has a load animation which doesn't let the user scroll.

ty :)

[TheElegantCoding]

This is because the library adds a div with position fixed to all the page, a fixed element don't scroll and that's why you can't scroll with an anchor you have to specify the translate position you want to go