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

**URL:** <https://forums.knack.com/t/long-lists-or-table-add-a-nice-scroll-to-top-button-to-your-app/7905>\
**Category:** Show & Tell\
**Created:** [June 4, 2015, 5:01pm UTC](https://forums.knack.com/t/long-lists-or-table-add-a-nice-scroll-to-top-button-to-your-app/7905 "2015-06-04T17:01:43Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![StevanLECO51061](https://avatars.discourse-cdn.com/v4/letter/s/e47c2d/32.png) [@StevanLECO51061](https://forums.knack.com/u/StevanLECO51061)\
**Post date:** [June 4, 2015, 5:01pm UTC](https://forums.knack.com/t/long-lists-or-table-add-a-nice-scroll-to-top-button-to-your-app/7905/1 "2015-06-04T17:01:43Z")

</div>

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\*\*/)}
```

---

<div class="post-metadata">

**Author:** ![AbeerMonaq52234](https://avatars.discourse-cdn.com/v4/letter/a/48db29/32.png) [@AbeerMonaq52234](https://forums.knack.com/u/AbeerMonaq52234)\
**Post date:** [January 30, 2019, 3:09pm UTC](https://forums.knack.com/t/long-lists-or-table-add-a-nice-scroll-to-top-button-to-your-app/7905/2 "2019-01-30T15:09:10Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![SamCarney81930](https://avatars.discourse-cdn.com/v4/letter/s/bbce88/32.png) [@SamCarney81930](https://forums.knack.com/u/SamCarney81930)\
**Post date:** [March 30, 2017, 7:24pm UTC](https://forums.knack.com/t/long-lists-or-table-add-a-nice-scroll-to-top-button-to-your-app/7905/3 "2017-03-30T19:24:13Z")

</div>

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/](http://html-tuts.com/back-to-top-button-jquery/)

---

<div class="post-metadata">

**Author:** ![EricBeekma26401](https://avatars.discourse-cdn.com/v4/letter/e/eb8c5e/32.png) [@EricBeekma26401](https://forums.knack.com/u/EricBeekma26401)\
**Post date:** [May 26, 2016, 12:57am UTC](https://forums.knack.com/t/long-lists-or-table-add-a-nice-scroll-to-top-button-to-your-app/7905/4 "2016-05-26T00:57:33Z")

</div>

Thanks!

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

---

<div class="post-metadata">

**Author:** ![StevanLECO51061](https://avatars.discourse-cdn.com/v4/letter/s/e47c2d/32.png) [@StevanLECO51061](https://forums.knack.com/u/StevanLECO51061)\
**Post date:** [May 11, 2016, 7:19am UTC](https://forums.knack.com/t/long-lists-or-table-add-a-nice-scroll-to-top-button-to-your-app/7905/5 "2016-05-11T07:19:32Z")

</div>

Hi.

add no-repeat to your background image CSS :

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

---

<div class="post-metadata">

**Author:** ![Guilhermeb42087](https://avatars.discourse-cdn.com/v4/letter/g/a87d85/32.png) [@Guilhermeb42087](https://forums.knack.com/u/Guilhermeb42087)\
**Post date:** [April 19, 2016, 3:17pm UTC](https://forums.knack.com/t/long-lists-or-table-add-a-nice-scroll-to-top-button-to-your-app/7905/6 "2016-04-19T15:17:39Z")

</div>

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

 ![](https://s3.amazonaws.com/cdn.freshdesk.com/data/helpdesk/attachments/production/5061871616/original/Captura%20de%20Tela%202016-04-19%20a%CC%80s%2012.16.20.png?1461079054)

  
  
Thanks!

---

<div class="post-metadata">

**Author:** ![StevanLECO51061](https://avatars.discourse-cdn.com/v4/letter/s/e47c2d/32.png) [@StevanLECO51061](https://forums.knack.com/u/StevanLECO51061)\
**Post date:** [April 19, 2016, 2:53pm UTC](https://forums.knack.com/t/long-lists-or-table-add-a-nice-scroll-to-top-button-to-your-app/7905/7 "2016-04-19T14:53:15Z")

</div>

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'
```

---

<div class="post-metadata">

**Author:** ![Guilhermeb42087](https://avatars.discourse-cdn.com/v4/letter/g/a87d85/32.png) [@Guilhermeb42087](https://forums.knack.com/u/Guilhermeb42087)\
**Post date:** [April 19, 2016, 2:45pm UTC](https://forums.knack.com/t/long-lists-or-table-add-a-nice-scroll-to-top-button-to-your-app/7905/8 "2016-04-19T14:45:00Z")

</div>

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!