Question

我有一个与jQuery相关的问题。我有一个评论框，当点击一个按钮时，它会使用jQuery切换。

我遇到的问题是按钮位于页面顶部，表单位于最底部，因此如果有人点击按钮，则无法看到评论框已切换。有没有办法，一旦他们点击提交评论按钮，页面将自己拖到底部，以便他们可以看到表单？

Answer 1

您可以将ID（例如 yourformid ）添加到表单中，然后执行重定向： http：// yoururl #theformidid 。在此页面中将向下移动到表单

Answer 2

您可以像动画时尚那样滚动：

$('#buttonID').click(function(){
  $('html, body').animate({
    scrollTop: $('#elementID').offset().top
  });
});

只需将#elementID替换为您要滚动到底部的元素ID。

确保将代码包装在ready处理程序中：

$(function(){
    $('#buttonID').click(function(){
      $('html, body').animate({
        scrollTop: $('#elementID').offset().top
      });
    });
});

Answer 3

一个简单的解决方案是将您的button元素更改为a元素，因为button特别适用于HTML中的表单提交，而a元素可用于导航内部文档。

因此，如果您有a元素，请在评论框中添加 id 属性，例如：

<div id="commentBox"></div>

然后在前一个a元素上放置 href 属性，该值应为#commentBox，因此该元素可能如下所示：

<a href="#commentBox" onclick="$('#commentBox').show();">Text</a>

此解决方案利用浏览器的功能导航到评论框，因此它可能是最标准的方式，但它无法实现滚动动画。

Answer 4

您可以使用锚点然后为滚动设置动画，非常类似于Sarfaz的答案：

function goToByScroll(id){
        $('html,body').animate({scrollTop: $("#"+id).offset().top},'slow');
}

然后你可以这样称呼它：

<script>
    goToByScroll("theIdIWantToGoTo");
</script>

演示：http://djpate.com/portfolio/scrollTop/

来源：http://djpate.com/2009/10/07/animated-scroll-to-anchorid-function-with-jquery/

Answer 5

只需使用锚点：

<a href="#formone" onclick="showform()">Form</a>
<form id="formone">....</form>

Jquery幻灯片页面到底部

5 个答案: