Go to Top Button

Hi Guys,

Does anyone have a working Go to Top button code to share?

One that will also work when the height of the page is dynamiclly changed on search views (depending on the number of lines, etc).?


1 Like

Hi @Guilherme

This should work for you. The button will fade in/out when the page is 500 pixels or longer.

Add this code to your JS:

/* Go To Top button */
$(document).on('knack-scene-render.any', function(event, scene) {  
  const markup = `
    <button id="go-to-top" class="kn-button">
      <i class="fa fa-arrow-up"></i>
      &nbsp; Go to Top
  const button = '#go-to-top'
  const hasButton = $(button).length
  if (hasButton) {

  $(button).on('click', function() {
    $("html, body").animate({ scrollTop: 0 }, "slow")

  $(button).css('visibility', 'hidden')

  $(window).on('scroll',function() {
    const scroll = $(window).scrollTop()
    if (scroll >= 500) {
      $(button).css('visibility', 'visible')
    } else {
      $(button).css('visibility', 'hidden')

Add this code to your CSS:

/* Go To Top button */
#go-to-top {
  position: fixed;
  bottom: 0;
  right: 15px;
  margin-bottom: 15px;
  z-index: 9;
  background: lightgray;


Knack Pros


Nice, look forward to trying this snippet :+1:
Thanks for sharing.

1 Like