使用 javascript 在页面底部显示一个元素答案

【问题标题】：Show an element at the bottom of the page with javascript使用 javascript 在页面底部显示一个元素
【发布时间】：2013-11-09 04:14:59
【问题描述】：

在留言簿中，我在页面底部有一个按钮，点击时会显示输入表单：

$("a#showform").click(function(){ 
  $(this).hide();
  $("div#post").show("slow");
});

问题是出现的表单在当前视口之外，只有手动滚动才能让用户看到表单。我无法从网上找到任何解决方案，但这一定是一个非常普遍的问题。没有“坚持到底”或类似的jquery命令吗？

接下来是：我在整个页面上使用nanoScroller，所以正常的向下滚动方法在这里不起作用。 nanoScroller 有一个方法 scroll:"bottom" 但它并不平滑...

非常感谢，托尼

【问题讨论】：

很高兴看到一个 jsfiddle。
托尼，到目前为止有什么可以接受的答案吗？

标签： javascript jquery animation layout

【解决方案1】：

您可以在网页展开时轻松滚动到页面底部：

 $("a#showform").click(function(){ 
        $(this).hide();
        $("div#post").show("slow");
        $('html, body').animate({
                                     scrollTop:$(document).height()
                                }, 'slow');
    });

您可以将.animate() 的“慢”设置为以毫秒为单位的任何速度。

jsFiddle

【讨论】：

【解决方案2】：

只需调整函数内的滚动

$("a#showform").click(function(){ 
  $(this).hide();
  $("div#post").show("slow");
  /* $(scroll magically to #post) */
  $("div#post").nanoScroller({ scroll: 'top' });
});

【讨论】：

【解决方案3】：

如果你不关心post item覆盖其他元素，你可能希望使用css来解决这个问题：

div#post {
  position: fixed;
  bottom: 0px;
}

【讨论】：