CODEWITHSUNDEEP
javascriptjsf-2primefaces
Fereshteh
Fereshteh

Reputation: 55

back to top page with smooth scrolling

I hava a button in a form ,I want when this button clicked the scroll back to top of page .my java script function is:

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

and in my form is:

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

but page is refreshed,instead of scrooling smoothy in top,what is solution?

Upvotes: 0

Views: 1812

Answers (2)

James Enocillas
James Enocillas

Reputation: 1

Just add this after the <body> tag:

<!--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)"; }

and script:

$(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; 

}); });

Upvotes: 0

Pratik
Pratik

Reputation: 954

Try below code. Hope it works.

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

Upvotes: 2

Related Questions