Go to Top Button

API & Customization Ask Developers
1

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).?

Thanks!

1 Like
2

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
    </button>
  `
  const button = '#go-to-top'
  const hasButton = $(button).length
  
  if (hasButton) {
    return
  }
  
  $('body').append(markup)

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

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

  $(window).on('scroll',function() {
    const scroll = $(window).scrollTop()
    console.log(scroll)
    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;
}

Enjoy,

Ian
Knack Pros

2 Likes
3

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

1 Like