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:

2 Likes

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

Cheers,
Ian

2 Likes

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

How do i make a Go to Bottom button as well? I tried to do it myself, but its not working… Here’s the code I tried:

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

JS:
/* Go To Bottom 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-bottom" class="kn-button"> <i class="fa fa-arrow-down"></i> &nbsp; Go to Bottom </button>

const target = isModal ? ‘.kn-modal-bg’ : #kn-${Knack.router.current_scene_key}
const button = isModal ? ‘.kn-modal-bg #go-to-bottom’ : #kn-${Knack.router.current_scene_key} #go-to-bottom
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({ scrollBottom: 0 }, “slow”)
})

$(button).css(‘visibility’, ‘hidden’)

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

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

Here’s an updated version. This will create a “Go to Bottom” button in addition to the “Go to Top” button. Also the buttons use arrow icons instead of text, which looks cleaner IMO.

CSS:

/* "Go to Top" and "Go to Bottom" buttons */
#scroll-buttons {
  position: fixed;
  bottom: 0;
  right: 15px;
  margin-bottom: 15px;
  z-index: 9;
  display: flex;
  flex-direction: row;
}

#go-to-top, #go-to-bottom {
  background: lightgray;
  margin-left: 10px;
}

JavaScript:

/* "Go to Top" and "Go to Bottom" buttons */
/* Knack Pros - www.knackpros.com */
$(document).on('knack-scene-render.any', function(event, scene) {  

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

  const isModal = Knack.modals.length != 0

  const markup = `
    <div id="scroll-buttons">
      <button id="go-to-top" class="kn-button">
        <i class="fa fa-arrow-up"></i>
      </button>
      <button id="go-to-bottom" class="kn-button">
        <i class="fa fa-arrow-down"></i>
      </button>
    </div>
  `

  const target = isModal ? '.kn-modal-bg' : `#kn-${Knack.router.current_scene_key}`
  const buttons = isModal ? '.kn-modal-bg #scroll-buttons' : `#kn-${Knack.router.current_scene_key} #scroll-buttons`
  const topButton = isModal ? '.kn-modal-bg #go-to-top' : `#kn-${Knack.router.current_scene_key} #go-to-top`
  const bottomButton = isModal ? '.kn-modal-bg #go-to-bottom' : `#kn-${Knack.router.current_scene_key} #go-to-bottom`
  const hasButtons = $(buttons).length
  
  if (hasButtons) return

  $(target).append(markup)

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

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

  $(bottomButton).on('click', function(e) {
    $(topElement).animate({ scrollTop: $(document).height() }, "fast")
  })

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

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

  $(scrollableElement).on('scroll',function() {
    const scroll = $(scrollableElement).scrollTop()

    if (scroll >= 100) {
      $(buttons).css('visibility', 'visible')
    } else {
      $(buttons).css('visibility', 'hidden')
    }
  })
})

Enjoy

2 Likes

That’s awesome Ian @KnackPros - looking forward to adding this snippet to my client apps.
Thank you for sharing :+1:

1 Like

I’ve just added this to one of my client apps that has a lot of tables. I’ve been using the “Go to Top” code for a while, but until now, hadn’t thought about the reverse. :thinking:
The code works perfectly, thank you for your time and generosity.


Knackpros - Go to Top / Bottom - 30 secs

1 Like

This works perfectly, thanks SO MUCH!!!
JD

1 Like

Very handy when using a mobile phone!
Thank you.
DM

1 Like