我在我的网站上结合了视差滚动和ScrollMagic,但遇到了锚链接滚动问题:链接工作滚动到页面上的位置;滚动并不平滑,只是跳跃。
以下是相关代码:
<script>
$(function() {
var controller = new ScrollMagic.Controller();
var tween = TweenMax.from("#animate", 0.5, {autoAlpha: 0, scale: 0.7});
var scene = new ScrollMagic.Scene({triggerElement: "a#home", duration: 200, triggerHook: "onLeave"})
.setTween(tween)
.addIndicators() // add indicators (requires plugin)
.addTo(controller);
// change behaviour of controller to animate scroll instead of jump
controller.scrollTo(function (newpos) {
TweenMax.to(window, 0.5, {scrollTo: {y: newpos}});
});
// bind scroll to anchor links
$(document).on("click", "a[href^='#']", function (e) {
var id = $(this).attr("href");
if ($(id).length > 0) {
e.preventDefault();
// trigger scroll
controller.scrollTo(id);
// if supported by the browser we can even update the URL.
if (window.history && window.history.pushState) {
history.pushState("", document.title, id);
}
}
});
});
</script>
如何成功实现平滑滚动?