Question

以下是增长和缩小的动画箭头。这就是用户点击以将页面向下移动到YouTube视频的内容。

<!-- SCROLL ARROW -->
      <div class="containerStyle" style="text-align: center;">
        <img id="topDownArrow" class="arrowStyle" src="./images/arrow2.png" alt="Arrow Down" />
      </div>


<!-- YOUTUBE -->
  <div class="row containerStyle" style="position: relative; margin-bottom: -50px;">
    <div class="col-sm-12">
      <div class="badge badge-pill pillStyle">
      <span  class="ytImage">
        <span class="g-ytsubscribe text-left" data-channel="xyz" data-layout="default" data-count="default"></span>
      </span>
        <a href="#" class="viewAll">VIEW ALL <span class="vaArrow">&rarr;</span></a>
      </div>
      <div id="youtubeWrap" class="youtubeWrap">
        <p id="youtubeLabel">ORIGINAL CHOREOGRAPHY<br /> <span id="subytLabel">by: XYZ <br />Artist Ft. Another Artist</span></p>
        <img src="./images/rip2.png" class="ytimageStyle" />
        <div id="arrowLink" class="iframeWrapper">
          <iframe src="#" frameborder="0" allowfullscreen></iframe>
        </div>
      </div>
    </div>
  </div>

这是我的代码。我使用jQuery向下移动页面。脚本的链接位于页面底部，并附在：

$(function() {});

//smooth scroll from top to article/youtube
  $('#topDownArrow').on('click', function() {
    document.querySelector('#arrowLink').scrollIntoView({
      behavior: 'smooth'
    });
  });

它似乎工作了一段时间，但现在它的命中和错过。通常，当您最初加载页面时，它可能会在您第一次单击它时起作用。有时会略微向下滚动然后停止。其他时候它根本不会工作。我很难过，因为它确实在某一点上起作用，而且我没有特别改变这个代码或标记。

Answer 1

经过长时间的不知疲倦的搜索，我找到了一个适合这个问题的解决方案。我仍然不完全确定为什么我上面的问题版本仅在部分时间内有效，但也许有一天我会弄明白。

$('a[href^="#"]').on('click', function(event) {
    var target = $(this.getAttribute('href'));
    if( target.length ) {
        event.preventDefault();
        $('html, body').stop().animate({
            scrollTop: target.offset().top
        }, 1000);
    }
  });

此解决方案将滚动动画应用于链接到页面上的ID的任何链接。它比我原来想要的要好。

scrollIntoView（）会提前停止工作，或者在大多数情况下根本不工作

1 个答案: