Question

我使用scrolltop功能在点击按钮时滚动到顶部但它不起作用？

** jquery ** * ***

jQuery('.scroll').click(function () 
{
  jQuery("html, body").animate({ scrollTop: '#fields2' }, 'slow');

    return false;

   });

** * ** HTML代码 的 ** * **

  <div id="fields2"> 
      ..............
 ...............

       <input class="send_btn scroll" type="button" value="back"/>
      </div>

Answer 1

问问自己： scrollTop是一个属性，用于指示距文档顶部的距离（以像素为单位）。

在那里，你要求jQuery将scrollTop设置为“＃fields2”，这是一个字符串。

所以，首先，我猜你试图从顶部检索元素＃fields2的距离？

这样：$('#fields2').offset().top

jQuery('.scroll, .send_btn').click(function (e) 
{
 e.preventDefault(); 
 var dest = $('#fields2').offset().top;
 jQuery("html, body").animate({ scrollTop:  dest }, 'slow');

 // If you need to submit a form, with an input like : <input type="submit" class="send_btn" value="Submit"/>
 if(jQuery(this).hasClass('send_btn')) { // check if you've clicked on .send_btn
    $(this).parents('#myForm').submit(); // submit the form.
 }


});

注意：我用e.preventDefault（）替换了return false。 return false不是停止火灾事件的标准方法。

编辑：作为e.preventDefault（）;停止元素上的事件，您必须使用jQuery手动提交表单，如上面的代码所示。

Answer 2

.offset（） 返回元素相对于文档的坐标，top参数将为您提供元素沿y轴的像素距离：< / p>

jQuery('.scroll').click(function () 
{
  jQuery("html, body").animate({ scrollTop:  $('#fields2').offset().top }, 'slow');

    return false;

   });

单击按钮时的jquery scrolltop功能

2 个答案: