Go to Top

Thank you to my college, Ian Crowe @KnackPros for sharing and allowing me to create a simple tutorial for scrolling long pages back to the top :rocket:

1 Like

Thanks again for the shout-out, Carl. And nicely done with the video.

Cheers,
Ian

1 Like

This is great, thank you!! Is it possible to tweak the code to get it to work inside Modal windows as well? Many of my long pages are actually modals so the view behind it doesnt have to reload every time we jump in an order.

1 Like

That’s a good question, Ian at @KnackPros very kindly gave me permission to do the video but I’m not a coder. Hopefully he can jump in on this thread and advise. :+1:

Hi,

I modified the code to work inside Modal windows:

/* Go To Top button */
$(document).on('knack-scene-render.any', function(event, scene) {  

  const excludedScenes = ['scene_1', 'scene_2'] // Add scenes where you don't want the button to appear
  if (excludedScenes.includes(scene.key)) {
    return
  }

  const isModal = Knack.modals.length != 0

  const markup = `
    <button id="go-to-top" class="kn-button">
      <i class="fa fa-arrow-up"></i>
      &nbsp; Go to Top
    </button>
  `

  const target = isModal ? '.kn-modal-bg' : `#kn-${Knack.router.current_scene_key}`
  const button = isModal ? '.kn-modal-bg #go-to-top' : `#kn-${Knack.router.current_scene_key} #go-to-top`
  const hasButton = $(button).length
  
  if (hasButton) {
    return
  }
  
  $(target).append(markup)

  const topElement = isModal ? '.kn-modal-bg' : 'html, body'

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

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

  const scrollableElement = isModal ? '.kn-modal-bg' : window

  $(scrollableElement).on('scroll',function() {
    const scroll = $(scrollableElement).scrollTop()
    // console.log(scroll)
    if (scroll >= 100) {
      $(button).css('visibility', 'visible')
    } else {
      $(button).css('visibility', 'hidden')
    }
  })
})

Hope that helps,

Ian
Knack Pros

2 Likes

That works perfectly, THANK YOU!!

1 Like