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 
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. 
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>
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> 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 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. 
The code works perfectly, thank you for your time and generosity.
1 Like
This works perfectly, thanks SO MUCH!!!
JD
1 Like
Very handy when using a mobile phone!
Thank you.
DM
1 Like