Thursday, May 22, 2014

SharePoint - Scroll To Top for Large Pages


Add this html to your SharePoint Page

<p id="page-top"><a href="#nav">Back to Top</a> </p>



Add below Style and Scripts to CEWP on your page.
 <script src="....//jquery-1.11.0.min.js"></script>

 <style>

#page-top {
                 position: fixed;
                bottom: 20px;
                right: 50px;
       }

#page-top a
{
background: #666;
text-decoration: none;
color: #fff;
width: 100px;
padding: 8px 0;
text-align: center;
display: block;
border-radius: 3px;
 
}

#page-top a:hover
{
text-decoration: none;
background: #999;
}

</style>


 <script>          
$(document).ready(function() {

//var scrollPosition = document.getElementById("s4-workspace").scrollTop;
//alert("Scroll Position: " + scrollPosition);
//$('#s4-workspace').animate({scrollTop:0}, 'fast');


var topBtn = $('#page-top');
                                 topBtn.hide();
$('#s4-workspace').scroll(function () {

   if ($(this).scrollTop() > 400) {
  topBtn.fadeIn();
} else {
  topBtn.fadeOut();
                    }
                 });


               topBtn.click(function () {
                $('#s4-workspace').animate({
                  scrollTop: '0px'
                 }, 500, "swing");
                return false;
           });





});
</script>

//(Tested in IE10, Firefox, Chrome)

No comments: