将您带到水平滚动网站中的锚点的按钮答案

【问题标题】：Button that takes you to an anchor in a horizontal scrolling website将您带到水平滚动网站中的锚点的按钮
【发布时间】：2020-08-03 14:10:55
【问题描述】：

我想要一个按钮，将我带到我的水平滚动网站的特定部分。

我正在使用 Wordpress。我愿意使用任何主题（或自定义任何主题），因为我已经尝试了几个。

我尝试使用 id、elementor 菜单锚点、'page to scroll id'插件... 只要网站垂直滚动，一切都有效。

我在 WP Customizer 中添加自定义 CSS 以使其水平。它仅在使用鼠标滚动时有效。

但是，当您单击按钮（或文本，或将您带到#id_name 的任何内容）时，id 或锚链接不会使页面水平滚动。

我知道它与 CSS 有关，并且我可能需要使用 js 滚动条或类似的东西，但到目前为止我找不到有效的东西。我正在使用 Astra Theme 和 Elementor。

这是我使用的额外 CSS：

.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
}

【问题讨论】：

标签： css wordpress anchor horizontal-scrolling elementor

【解决方案1】：

如果我说得对，你想水平滚动，你可以使用 jQuery 来做到这一点：

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

选择要滚动到的元素的第一行

第二行获取左偏移（元素离左边多远[单位px]）

第三行是告诉窗口在 X 坐标中滚动

【讨论】：

您好，感谢您的快速回复。您知道如何在 WordPress 中插入此代码吗？
不客气，您可以通过多种方式添加我认为 WordPress 是一个开源平台，但您可以轻松地将这个插件 Header and Footer Scripts 添加到您的插件中你可以用它来插入你想要的任何脚本。

【解决方案2】：

我的解决方案并非特定于 Wordpress 主题，但我希望它对您有所帮助。如果您想发布您的 HTML 标记，我可以为您的场景提供更具体的答案:)

假设您的页面布局已经设置为水平滚动，您需要采取以下步骤才能使锚点功能正常工作：

为您希望滚动到的元素设置一个 ID。
在您希望触发此滚动的按钮/链接上设置点击监听器。
点击按钮后，获取您要滚动到的元素的offsetLeft 属性。
将父容器的 scrollLeft 属性设置为上述值。

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 -->

注意：我在这里使用了带有href 属性的锚<a> 标记，因为我们应该保持它符合Web 可访问性指南。如果需要，欢迎您使用 <button> 和 data 属性。

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
  }
});

这里有几件事：

您需要根据 HTML 标记的外观更改此处的各种类名。
offsetLeft 属性准确的唯一要求是滚动容器具有relative 定位。

动画？

作为奖励，您可以为滚动设置动画，因此它不仅仅是一个瞬间的“跳跃”。我也很乐意概述如何做到这一点，请告诉我。

【讨论】：