我的项目中有一个奇怪的问题,我的锚标签在页面上工作,但似乎无法恢复页面。我已经设法用尽可能少的代码重新创建这个问题。
我在代码示例中添加了一个调试,以提供尽可能多的信息。我们使用的插件是ScrollMagic功能,我试图在JS中尝试修复它,但无济于事。关于为什么锚不向上滚动的任何想法?
/*============================================================
-----SCROLLMAGIC SETUP-----
============================================================*/
var ctrl = new ScrollMagic.Controller({
globalSceneOptions: {
triggerHook: 'onLeave'
}
});
$("section").each(function() {
var name = $(this).attr('id');
new ScrollMagic.Scene({
triggerElement: this
})
.setPin(this)
.addIndicators({
colorStart: "rgba(255,255,255,0.5)",
colorEnd: "rgba(255,255,255,0.5)",
colorTrigger : "rgba(255,255,255,1)",
name:name
})
.loglevel(3)
.addTo(ctrl);
});
var wh = window.innerHeight;
new ScrollMagic.Scene({
offset: wh*3
});
/*============================================================
-----SCROLLMAGIC ANCHORS/SCROLLTO-----
============================================================*/
$('header a').on('click',function() {
var targetSection = $(this).attr('href').substring(1);
var targetPerc = (targetSection-1) / ($('nav a').length-1);
var targetPos = scene.scrollOffset() + (scene.duration()*targetPerc);
controller.scrollTo(targetPos);
});
/*============================================================
-----BOUNCEIN ANIMATIONS ON VIEW-----
============================================================*/
$(function() {
AOS.init();
});
/* Make the body 100% of the browser viewport height */
html, body, .hero { height: 110%; margin: 0; }
/* Make each section 100% of the browser viewport height */
section { height: 100%; position: relative; }
/* Header to follow through the page */
header { position: fixed; left: 5%; top: 40%; z-index: 99; font-size: 18px; }
/* Background colors for each section */
section#one { background: url('https://via.placeholder.com/1920x1080') center / cover; }
section#two { background: linear-gradient(90deg, #F4F6F5 50%, #FFFFFF 50%); }
section#three { background: url('https://via.placeholder.com/1920x1080') center / cover; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.3/ScrollMagic.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://unpkg.com/[email protected]/dist/aos.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://unpkg.com/[email protected]/dist/aos.css" rel="stylesheet"/>
<!-- Header -->
<header id="navigation">
<p><a href="#one">who we are</a></p>
<p><a href="#two">what we do</a></p>
<p><a href="#three">get in touch</a></p>
</header>
<!-- Section One -->
<section id="one">
<div class="container text-center" data-aos="fade-up">
<h1>One</h1>
</div>
</section>
<!-- Section Two -->
<section id="two">
<div class="container text-center" data-aos="fade-up" data-aos-offset="0">
<h2>Two</h2>
</div>
</section>
<!-- Section Three -->
<section id="three">
<div class="container text-center" data-aos="fade-up" data-aos-offset="0">
<h1>Three</h1>
</div>
</section>
如果将脚本添加为head元素的最后一部分,则代码似乎运行良好。
http://jsfiddle.net/1f7e3akn/10/
如果您将其添加为外部脚本,也可以使用相同的位置
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.3/ScrollMagic.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://unpkg.com/[email protected]/dist/aos.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://unpkg.com/[email protected]/dist/aos.css" rel="stylesheet"/>
<script src="<your_script>"></script>
我不确定ScrollMagic是否真的为你工作 - 上升或下降。在这里查看他们的示例代码http://scrollmagic.io/examples/advanced/anchor_link_scrolling.html,您的代码与他们的代码有一些区别。也许尝试更密切地复制文档?例如...
您将新的ScrollMagic.Controller保存到变量ctrl,但是您稍后将其称为控制器 - 我在调试页面时在变量控制器上未定义。
同样在他们的例子中,他们将新的ScrollMagic.Scene保存到一个名为scene的变量中,但是你没有保存你的 - 但后来又引用了变量场景,我再次将其视为未定义。
我认为你的代码只能正常运行,因为它作为普通的锚标记运行。