Question

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

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

以我的形式：

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

但页面是刷新的，而不是在顶部流淌光滑，什么是解决方案？

Answer 1

尝试以下代码。希望它有效。

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

Answer 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; 

}); });

返回首页，滚动流畅

2 个答案: