Add [Back to Top] button in SharePoint master page
If your SharePoint pages are tend to be bulky in content. I mean most page have a long length and users need to scroll up and down during browsing, it is a good idea to add a [Back to Top] button via SharePoint master page.
I believe there are tons of material online tell you how to create it. It actually happened to me and I found none of them fit my situation. Currently my company’s SharePoint is SP2016 on-premise. There are some difficulty apply those solution I found online. Therefore I made below setup based on my research online.
In my script, the button will only show up (fade in) when user scroll down for certain pixel.
<button type=”button” id=”BackTop” class=”toTop-arrow”></button><script type=”text/javascript”>//<![CDATA[
$(function(){
$(‘#BackTop’).click(function(){
$(‘#s4-workspace’).animate({scrollTop:0}, 1000);
});
$(‘#s4-workspace’).scroll(function() {
if ( $(this).scrollTop()){
$(‘#BackTop’).fadeIn(500);
} else {
$(‘#BackTop’).fadeOut(500);
}
});
});
//]]>
</script>
2. Add style in your style sheet:
/* — — — — Back to Top button — — — — — -*/
.toTop-arrow {
display: none;
height: 100%;
position: fixed;
right: 30px;
z-index: 9999;
bottom: 0;
width: 70px;
height:70px;
background: url(../Style%20Library/backtotop.png) no-repeat left 0;
border: 0px;
}
.toTop-arrow a{
display: block;
}/* — — — — for go back button — — — — — -*/
3. Upload your back-to-top image:
Create a back to top image with 70px x 70px, name it “backtotop.png” and upload to /Style Library/ library.
In some online tutorial, the arrow icon can be generated via CSS. However I failed to render a correct arrow in the SharePoint environment. It may because there is some conflict between existing CSS. After some hours of try and error, I decide to make my back-to-top image directly.
Hope it helps and enjoy your SharePoint hard life….
Originally published at http://createsitecollection.wordpress.com on December 19, 2019.
