Question

我正在使用Chris Ferdinandi的Smooth Scroll脚本，我试图让它滚动到一个元素，但是以该元素为中心。与http://www.spotify.com处的工作类似。

我尝试将以下代码添加到脚本的开头：

$(document).ready(function(){

    $('.downarrow a').click(elementhref = $('.downarrow a').attr('href'));

    var elementheight = $(elementhref).height();
    var windowheight = $(window).height();

    if (elementheight < windowheight) {
        topoffset = ((windowheight / 2) - (elementheight / 2) - 30);
    } else {
        topoffset = 0;
    }

});

然后我将变量topoffset添加到脚本中，以便将锚点的位置偏移正确的数量。

var endLocation = _getEndLocation( document.querySelector(anchor), topoffset ); // Scroll to location

它适用于第一部分，但是当我点击下一个.downarrow a元素时，我的代码只使用第一部分的高度。但是我的HTML中有几个与同一类的链接。

这是我所拥有的简化版本：

<section id="home">
  <!--content-->
  <div class="downarrow"><a data-scroll href="#about">Scroll Down</a></div>
</section>

<section id="about">
  <!--content-->
  <div class="downarrow"><a data-scroll href="#portfolio">Scroll Down</a></div>
</section>

<section id="portfolio">
  <!--content-->
  <div class="downarrow"><a data-scroll href="#contact">Scroll Down</a></div>
</section>

<section id="contact">
  <!--content-->
</section>

我试图让它根据点击的元素更改elementhref变量，但这显然不适用于我的代码。我尝试给每个downarrow一个唯一的ID，但它对我来说太复杂了。

这是我第一次使用JavaScript和jQuery，所以我希望有一个我忽略的简单解决方案。

Answer 1

尝试

(function() {

   function setStuff(elementhref) {

      var elementheight = $(elementhref).height();
      var windowheight = $(window).height();

      if (elementheight < windowheight) {
        topoffset = ((windowheight / 2) - (elementheight / 2) - 30);
      } else {
       topoffset = 0;
      }

   }

   $('.downarrow a').click(function() {
     setStuff( $(this).attr('href') );
   });

})();

仅定位您已点击的'this - 并创建一个jquery对象，以便您可以访问jquery方法$(this)

编辑/更新 - 在部件中添加以将点击处理程序与函数连接到dostuff

使用平滑滚动时将一个部分居中

1 个答案: