如何使用JavaScript滚动到某个特定的地点/ID？
如何使用JavaScript滚动到某个特定的地点/ID？
提问于 2018-06-13 08:38:46
我正在尝试在没有JQuery的情况下自动滚动到某个特定的地方/ID。现在我用JQuery编写了这段代码，这会通过自动滚动将我发送到一个特定的ID。
$(function() {
$('a[href*=#]').on('click', function(e) {
e.preventDefault();
$('html, body').animate({
scrollTop: $($(this).attr('href')).offset().top
}, 900, 'linear');
});
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#one">one</a>
<div id="one"></div>
我也想做一些类似的效果，但是使用JavaScript，你有什么想法吗？
回答 1
Stack Overflow用户
回答已采纳
发布于 2018-06-13 09:00:30
这是你在使用javascript时能做的最好的开始，只使用window.scroll和element.getBoundingClientRect().top实现平滑的滚动效果，请看下面的演示。
#one {
margin-top: 1000px
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#one">one</a>
<div id="one">down-here</div>
<script type="text/javascript">
(function() {
let anchors = document.querySelectorAll('a[href*="#"]');
anchors.forEach(function(anchor) {
anchor.addEventListener('click', function(e) {
e.preventDefault();
let id = this.getAttribute("href");
let targetElement = document.querySelector(id)
let scrollHeight = targetElement.getBoundingClientRect().top + window.scrollY;
//scroll with smoooth effect
window.scroll({
top: scrollHeight,
behavior: 'smooth'
});
});
})
})();
</script>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/50827655
复制相关文章
相似问题
腾讯云开发者
