按钮 - 悬停时转到锚定 URL 1，单击时转到 URL 2 [关闭]

Question

我正在主页上创建一个“单页”导航。

我的菜单导航中有一个“图书”按钮。

我想要实现的是，如果访问者“悬停”在“书籍”按钮上，主页会向下滚动到主页上“书籍”部分的位置，因此这应该是一个锚链接 - #books

但是当用户点击按钮时，它会将他们带到实际的“书籍”页面 - example.com/books

所以我需要一个悬停时的锚链接，以及点击时的常规链接。

这可能吗？

除了在点击时创建常规链接之外，不幸的是我没有尝试太多，我真的不知道从哪里开始悬停动作。

Answer 1

这将向下滚动到 div，但请记住，我为滚动添加了一秒钟的延迟，以便用户可以单击它。您可以根据需要增加/减少延迟。

$(document).ready(function () {
  $('div.top').mouseenter(function() {
  $('html, body').stop(true, true).delay(1000).animate({
    scrollTop: $("div.middle").offset().top
  }, 1000);
  })
});

body,
html {
  width: 100%;
  height: 100%;
  margin: 0;
  display: inline;
}

.top {
  background-color: green;
  height: 20%;
  width: 20%;
  display: flex;
  margin: 15px auto 55px auto;
  padding: 15px;
}

.middle {
  background-color: yellow;
  height: 100%;
  width: 100%;
  display: flex;
}
a {
  color: white;
  text-decoration: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="top">
  <a href="http://google.com">Hover for scroll or Click for Google</a>
</div>
<div class="middle">
  <h1>Hello!</h1>
</div>

Answer 2

这是可能的，但可能不是对用户过于友好（毕竟触摸屏没有“悬停”功能）。为此，您需要使用 JavaScript，并且可以执行以下操作：

// Get all 'hover' links
let hoverLinks = document.querySelectorAll('[data-scrollto]');

// Loop through, and add 'mouseenter' events
Array.from(hoverLinks).forEach(link => {
  // Add hover state
  link.addEventListener('mouseenter', () => {
    // Find associated div
    let div = document.getElementById(link.dataset.scrollto) || null;

    // If div doesn't exist, return
    if(!div) return;

    // Scroll to div
    div.scrollIntoView(true);
  });
});

html,
body{
  scroll-behavior: smooth;
}

nav {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background: #fff;
  padding: 1em 0;
  height: 1em;
  line-height: 1em;
  z-index: 2;
}

section {
  height: 100vh;
  box-sizing: border-box;
  padding: 3em 0;
}

<nav>
  <a href="home.html">Home</a>
  <a href="books.html" data-scrollto="books-wrapper">Scroll to books</a>
</nav>

<section>
  Hello
</section>

<section>
  Hello
</section>

<section id="books-wrapper">
  BOOKS!
</section>

<section>
  Hello
</section>

<section>
  Hello
</section>

简而言之，您只需通过 JavaScript 向链接添加一个事件侦听器（在本例中为“mouseenter”事件侦听器），当触发该链接时（例如，当用户将鼠标悬停在链接上时）将搜索关联的滚动位置并滚动到它。要链接到页面，只需使用标准的<a href=""></a> 链接即可。

在上面的示例中，我使用id 为滚动到位置创建唯一标识符，然后将其作为字符串保存在链接的属性中。这样，您也可以重新使用此事件侦听器将滚动添加到其他链接。例如，您可以将contact 中的id 添加到页面上的另一个元素，并将data-scrollto="contact" 添加到新的<a> 标记以滚动它。

编辑：

为了使这更相关：

document.querySelector('.menu-button').addEventListener('mouseenter', () => {
  let div = document.getElementById('books-home') || null;
  
  if(!div) return;
  
  div.scrollIntoView(true);
});

html,
body{
  scroll-behavior: smooth;
}

nav {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background: #fff;
  padding: 1em 0;
  height: 1em;
  line-height: 1em;
  z-index: 2;
}

section {
  height: 100vh;
  box-sizing: border-box;
  padding: 3em 0;
}

<nav>
  <a href="home.html">Home</a>
  <a href="books.html" class="menu-button">Scroll to books</a>
</nav>

<section>
  Hello
</section>

<section>
  Hello
</section>

<section id="books-home">
  BOOKS!
</section>

<section>
  Hello
</section>

<section>
  Hello
</section>