Question

我是JS的新手，我想将其固定在页面底部，并在滚动/单击时停留在该位置（请参见https://garden-eight.com/）。

当前，我网站上的每个部分下方都有一个箭头，但是由于并非每个部分的高度都相同，因此尽管它可以正常工作，但看起来却不是很好。我正在尝试围绕它的工作原理并压缩我的代码，因为目前我有9个箭头和9种不同的功能，可滚动到每个部分。

这里是我目前所拥有的（由于整个代码很长，我将举一个例子）：

HTML：

  <div class="row arrow-white arrow__1 animated pulse infinite" id="scroll">
        <i class="ion-md-arrow-dropdown"></i>
    </div>

<section class="new-section__offhalf js--section-overview" id="overview">
    <div class="section-overview">
        <h2>Text</h2>
        <p>Text</p>
    </div>
</section>

CSS：

.arrow-white {
    bottom: 0;
    color: #fff;
}

.arrow__1 {
    position: fixed;
}

JS：

  $('div.arrow__1').click(function () {
        $('html, body').animate({
            scrollTop: $("section.js--section-overview").offset().top + 
  $('nav').height()
        }, 1000)
    }),

我也尝试过：

  $('#scroll').click(function(){
        var nextSection = $(this).closest('section').next('section');
        $('html, body').animate({
            scrollTop: $(nextSection).offset().top
        }, 2000);
    });

此^不适用于我的图标。

有人能对此有所启发或将我定向到解释如何实现此目标的CodePen / JSFiddle吗？

固定/固定单击以滚动Arrow JS？

0 个答案: