代码之家 › 专栏 › 技术社区 › Charlie McShane

定位标记在页面下方有效,但不在页面上方有效。

scrollmagic anchor css html javascript

Charlie McShane · 技术社区 · 6 年前

我的项目出现了一个奇怪的问题,我的锚定标签在页面下方工作,但在页面上方似乎不工作。我已经设法用尽可能少的代码重新创建了这个问题。

我在代码示例中添加了调试,以尽可能多地提供信息。我们使用的插件是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/aos@3.0.0-beta.5/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/aos@2.3.0/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>

2 回复 | 直到 6 年前

Csisanyi 6 年前

如果脚本是作为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/aos@3.0.0-beta.5/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/aos@2.3.0/dist/aos.css" rel="stylesheet"/>
<script src="<your_script>"></script>

Baxter 6 年前

我不确定ScrollMagic是否真的在为你工作——上下。在这里查看他们的示例代码 http://scrollmagic.io/examples/advanced/anchor_link_scrolling.html ,您的代码与他们的代码有一些不同。也许可以试着更紧密地复制文档?例如。。。

您将新的scrollmagic.controller保存到变量ctrl中,但稍后您将其称为controller—我在调试页面时在变量controller中未定义。

同样,在他们的示例中,他们将新的scrollmagic.scene保存到一个名为scene的变量,但您没有保存您的变量-稍后将引用变量scene,我再次将其定义为undefined。

我认为您的代码只能向下运行,因为它是作为一个普通的锚标记运行的。