按钮 - 悬停时转到锚点 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为滚动到位置创建唯一标识符，然后将其保存为链接属性中的字符串。这样，您也可以重复使用此事件侦听器向其他链接添加滚动。例如，您可以将contactid添加到页面上的另一个元素，并将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>