这是一个代码笔,它演示了我的问题:http://codepen.io/PiotrBerebecki/pen/yaWQwZ
目标是当用户点击时有一个滚动动画
- 顶部导航链接,以及
- 右下角的
返回顶部
按钮。
我已经成功实现了一个满足要求 1 的普通 JavaScript 解决方案,但我在满足要求 2 方面遇到了困难。
该解决方案依赖于递归 scrollTo
函数。
正如您所见,当您向下滚动并单击我的作品
链接时,动画会正确运行。但是,当您向下滚动并单击返回顶部
按钮时,没有动画,页面只是跳到顶部。我不明白为什么以及如何解决它。
JS代码如下:
(function() {
// ======== SCROLL FUNCTION ======== //
const scrollTo = (element, to, duration) => {
if (duration <= 0) {return;}
var difference = to - element.scrollTop;
var perTick = difference / duration * 10;
setTimeout(() => {
element.scrollTop = element.scrollTop + perTick;
if (element.scrollTop === to) {return;}
scrollTo(element, to, duration - 10);
}, 10);
}
// ======== TOP NAVIGATION ======== //
// Save DOM elements that can be scrolled to
let targetElements = {};
(function() {
const myWork = document.getElementById('my-work');
const contact = document.getElementById('contact');
targetElements = {
'my-work': myWork,
contact: contact
};
})();
// Select links with scroll action
const scrollElements = document.getElementsByClassName('scroll');
// Add event listeners to navigation links with scroll action
Array.prototype.forEach.call(scrollElements, scrollElement => {
scrollElement.addEventListener('click', event => {
event.preventDefault();
const targetElement = targetElements[(scrollElement.getAttribute('href').slice(1))];
scrollTo(document.body, targetElement.offsetTop, 800);
});
});
// ======== BACK TO TOP BUTTON ======== //
const backToTopElement = document.getElementsByClassName('back-to-top')[0];
const backToTopTargetElement = document.getElementById('my-work');
backToTopElement.addEventListener('click', () => {
scrollTo(document.body, backToTopTargetElement.offsetTop, 800);
});
})();
这是 HTML(返回顶部
按钮位于底部):
<!-- ======== NAVIGATION ======== -->
<nav role='navigation'>
<div id="logo-container">
<a class="scroll" href="#my-work">SUPER CAT</a>
</div>
<ul id="menu">
<li><a class="scroll menu-link" href="#my-work">MY WORK</a></li>
<li><a class="scroll menu-link" href="#contact">CONTACT</a></li>
</ul>
</nav>
<!-- ======== MY WORK ======== -->
<article id="my-work">
<header>
<h1>MY WORK</h1>
</header>
...
</article>
<!-- ======== CONTACT ======== -->
<footer id="contact">
<h2>CONTACT</h2>
...
</footer>
<a href="#" class="back-to-top">Back to Top</a>
最佳答案
尝试删除#
来自 <a>
中的 href 的 anchor 标签:
<a href="javascript:void(0);" class="back-to-top">Back to Top</a>
更新笔:http://codepen.io/anon/pen/YGbBXz
这是一个很好的引用问题/答案,应该可以解决有关 href="#"
的任何进一步问题。和 href
属性(property)包含:What is href="#" and why is it used?
总结上述帖子(关于评论中的问题):
href="#"
定位到页面顶部。
href
仅当 anchor 标记是超链接时才需要。
关于javascript - 普通 JavaScript 中的滚动动画仅适用于导航链接,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40309903/