Elementor Question posted in
A comprehensive tutorial library can be found here.

Elementor – Button that takes you to an anchor in a horizontal scrolling website

I want to have a button that takes me to a specific part of my horizontal scrolling website.

I am using WordPress. I am willing to use any theme (or customizing any theme) as I’ve already tried several.

I tried using id, elementor menu anchors, ‘page to scroll id’ plugin…
Everything works only as long as the website scrolls vertically.

I add custom CSS in WP Customizer to make it horizontal. It works only when scrolling with the mouse.

However, the ids, or anchor links don’t make the page scroll horizontally when you click the button (or text, or whatever takes you to the #id_name).

I know it has to do with the CSS, and that I probably need to use a js scrollbar, or something like that, but I can’t find something that works so far.
I am using Astra Theme and Elementor.

This is the extra CSS i used:

.elementor-inner {
  width: 100vh;
  height: 100vw;
  overflow-x: hidden;
  overflow-y: scroll;
  transform: rotate(-90deg) translateX(-100vh);
  transform-origin: top left;
  position: absolute;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.elementor-section-wrap {
  transform: rotate(90deg) translateY(-100vh);
  transform-origin: top left;
  display: flex;
  flex-direction: row;
  width: 600vw;
}

.section {
  width: 100vw;
  height: 10vh;
}

 ::-webkit-scrollbar {
  display: none
}
Tags:

2

Answers


  1. 0

    If I get you right you want to scroll horizontally, to do so you can do it using jQuery:

    <script>
    
    $elementToScrollTo = $('#scroll-to');
    $whereToScroll = $elementToScrollTo.offset().left - 30; // 30px just to give some space before the element
    window.scrollBy($whereToScroll, 0);
    
</script>

    First line to select the element you want to scroll to

    Second line to get the offset left (how far is the element from the left [in px])

    Third line is to tell window to scroll in X coordinates

    Login or Signup to reply.
  2. 0

    My solution is not specific to a WordPress theme, but I hope it will help you out nonetheless. If you want to post your HTML markup, I can give a more specific answer for your scenario 🙂

    Assuming your page layout is already set up with horizontal scrolling, here are the steps you’ll need to take to get that anchor functionality working:

    • Set an ID on the element you wish to scroll to.
    • Set a click listener on the button/link you’d like to trigger this scroll from.
    • On click of the button, get the offsetLeft property of the element you’d like to scroll to.
    • Set the parent container’s scrollLeft property to that value from above.

    HTML:

    <a href="#my-element" class="my-button">Scroll to Element!</a>

<!-- your existing markup -->
  <div id="my-element">
    <p>Content would go here</p>
  </div>
<!-- /your existing markup -->

    Note: I’m using an anchor <a> tag with an href attribute here, since we should keep this in line with the web accessibility guidelines. You’re welcome to use a <button> and maybe a data attribute, if needed.

    JavaScript:

    // (These class names would be specific to your case)
const myButton = document.querySelector(".my-button");
const scrollContainer = document.querySelector(".scroll-container");

myButton.addEventListener("click", event => {
  // Prevents the link's default behavior:
  event.preventDefault();

  // Gives us the string: "#my-element":
  const link = this.href;

  // Finds the corresponding element:
  const element = document.querySelector(link);

  if (element) {
    const leftPosition = element.offsetLeft;

    // This line actually takes us to the element:
    scrollContainer.scrollLeft = leftPosition
  }
});

    Couple things here:

    • You will need to change the various class names here, based on what your HTML markup looks like.
    • The only requirement for the offsetLeft property to be accurate, is that the scroll container has relative positioning.

    Animation?

    As a bonus, you could animate the scrolling, so it’s not just an instant “jump”. I would be happy to outline how to do that as well, just let me know.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search