如何使用jQuery缓慢向下滚动页面?

时间:2019-03-26 12:42:45

标签: jquery jquery-animate

我试图在单击按钮时获得慢速滚动效果。 现在,我发现单击一个元素时可以跳转到页面的哈希值的函数。

我使用scrolltop方法跳转到我的页面。 我在页面上向下搜索-220。

浏览器中的错误消息:

Uncaught TypeError: Cannot read property 'top' of undefined
at HTMLDivElement.<anonymous> (script.js:35)
at HTMLDivElement.dispatch (jquery.min.js:2)
at HTMLDivElement.y.handle (jquery.min.js:2)

欢迎任何帮助。 如有疑问,请询问。

代码:

$(document).ready(function() {
  $("#choose-time div").on('click', function(event) {
    $(this).toggleClass("selectedBox");

    if (this.hash !== '') {
      event.preventDefault();
      var hash = this.hash;

      $("html, body").animate({
        scrollTop: $(hash).offset().top - 220
      }, 900);
    }
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section id="choose-time">
  <h2>Kies een Datum</h2>
  <div>
    <p>Donderdag</p>
    <p>28/04/2019</p>
  </div>
  <p><strong>Click</strong> de gewenste datum aan a.u.b</p>
</section>

2 个答案:

答案 0 :(得分:0)

我认为您需要更正您使用的哈希。检查以下链接,了解哈希如何在jQuery中工作。 How does $(this.hash) work?

第二个选项,您可以使用特定的ID或班级并增加时间

import scala.collection.mutable.WrappedArray;
import scala.collection.JavaConversions;

UDF3<String, WrappedArray<Long>, WrappedArray<String>, Double> myUDF = new UDF3<String, WrappedArray<Long>, WrappedArray<String>, Double> () {
      public Double call(String param1, WrappedArray<Long> param2, WrappedArray<String> param3) throws Exception {
        List<Long> param1AsList = JavaConversions.seqAsJavaList(param1);
        List<String> param2AsList = JavaConversions.seqAsJavaList(param2);

        ... do work ...

        return myDoubleResult;
    }
};

答案 1 :(得分:0)

您可以将以下代码用作jQuery

$(document).ready(function(){
      $("#choose-time div").on('click', function(event){
        $(this).toggleClass("selectedBox");
          var hash = $(this).offset().top - 220;
          if(hash !== ''){
            event.preventDefault();

            $("html, body").animate({
              scrollTop: hash
            }, 900);
          }
      });
    });