平滑滚动返回首页答案

【问题标题】：back to top page with smooth scrolling平滑滚动返回首页
【发布时间】：2015-04-14 10:13:32
【问题描述】：

我在表单中有一个按钮，我希望当这个按钮单击时滚动回到页面顶部。我的 java 脚本函数是：

function handleResponse() {
       window.scrollBy(0,0).fadeIn('smooth')
}

我的形式是：

 <p:commandButton icon="ui-icon-arrowthick-1-n" onclick="handleResponse" immediate="true"/>

但是页面刷新了，而不是在顶部平滑滚动，有什么解决办法？

【问题讨论】：

你的页面中包含 jquery 吗？
和/或使用 p:button 代替 p:commandButton

标签： javascript jsf-2 primefaces

【解决方案1】：

试试下面的代码。希望它有效。

$("#handleResponse").click(function() {
  $("html, body").animate({ scrollTop: 0 }, "slow");
  return false;
});

【讨论】：

不一定是最高效的，但它确实有效，而且效果很好。
你可以使用 window.scrollBy(0,0).fadeIn();但它不会给你平滑的效果。
@m.mahdavi 它不会引用页面。如果你看到我让它返回 false。
你有 jquery，因为你使用 PrimeFaces

【解决方案2】：

只需在<body> 标签之后添加这个：

<!--Back to top Button-->
    <a href="#" id="btt" title="Back to Top" style="display: none;"><span></span></a>
<!--Back to top Button-->

CSS：

#btt {
  position:fixed;
  right:10px;
  bottom:10px;
  cursor:pointer;
  width:50px;
  height:50px;
  background-color:#019934;
  display:none;
  -webkit-border-radius:60px;
  -moz-border-radius:60px;
  border-radius:60px; }

#btt span {
  position:absolute;
  top:8%;
  left:40%;
  margin-left:-8px;
  margin-top: 0px;
  height:0;
  width:0;
  border:13px solid transparent;
  border-bottom-color:#ffffff; }

#btt:hover {
  background-color:#254117;
  opacity:1;filter:"alpha(opacity=100)";
  -ms-filter:"alpha(opacity=100)"; }

和脚本：

$(document).ready(function(){ 

$(window).scroll(function(){ 

    if ($(this).scrollTop() > 100) { 

        $('#btt').fadeIn(); 

    } else { 

        $('#btt').fadeOut(); 

    } 

}); 

$('#btt').click(function(){ 

    $("html, body").animate({ scrollTop: 0 }, 600); 

    return false; 

}); });

【讨论】：