Long lists or table? add a nice "scroll to top" button to your app

API & Customization Show & Tell
1

Add the following Jquery to API & Code / Javascript 

// Back to top //
$(document).on('knack-scene-render.any',   function(event, page) {

// Removes any back to top <p> inserted by any previous page rendering or modal pop up

$(“p”).filter(":contains(‘Back to top’)").remove();


// inserts a new back to top <p>

$("<p id=‘back-top’><a href=’#top’<span></span>Back to top</a></p>").insertAfter($("#knack-body"))


// hide #back-top first
$("#back-top").hide();

// fade in #back-top
$(function () {
	$(window).scroll(function () {
		if ($(this).scrollTop() &gt; 100) {
			$('#back-top').fadeIn();
		} else {
			$('#back-top').fadeOut();
		}
	});

	// scroll body to 0px on click
	$('#back-top a').click(function () {
		$('#knack-body').animate({
			scrollTop: 0
		}, 900);
		return false;
	});
});



});

Add the following CSS : 

/** set the position of the back to top button**//

#back-top {

position: fixed;

bottom: 20px;

right: 10px;

left: auto;

top: auto;

}


#back-top a {


width: 108px;
height: 108px;
display: block;
text-align: center;
font: 11px/100% Arial, Helvetica, sans-serif;
text-transform: uppercase;
text-decoration: none;
color: #bbb;

/* transition */
-webkit-transition: 1s;
-moz-transition: 1s;
transition: 1s;



}

#back-top a:hover {

color: #000;

}


/* arrow icon (span tag) */


#back-top {height: 108px; background: url( /** write here the url of your image**/)}

2

Hi @Stevan LE CORRE, I tried implementing this in my app but i couldn't get it to work. I might have missed something. All I get is "BACK TO TOP" at the bottom of my page but nothing happens when I click it.

3

I'm not an expert, but maybe one of you can figure out how to adapt the code so that the back to top "floats" after the user starts scrolling down. This way they don't have to go to the VERY bottom to have the option.

Here's some script, but it's not adapted to knack environment.

http://html-tuts.com/back-to-top-button-jquery/

4

Thanks!


I was trying to do something similar but this works great.

5

Hi.

add no-repeat to your background image CSS :

#back-top {height: 108px; background: url( /** write here the url of your image**/) no-repeat;}

6

Thanks for your reply. Buttom something is happening here. Take a look. Also the action of going top is not working. Any idea?

Captura%20de%20Tela%202016-04-19%20a%CC%80s%2012.16.20.png?14610790541875×178



Thanks!

7

Hi,

theoretically only the the background url is to be specified.

If you subscribed quite recently to Knack try and change : 

$(document).on('knack-scene-render.any'

to 

$(document).on('knack-page-render.any'

$(document).on('knack-page-render.any'

8

Hi Stevan,

I tried your code, but it did not work for me. All I have to do is to insert the background URL or do I have to change anything more?

Thanks!