Go to Top / Bottom
- CH Project Support Limited Carl Holmes
- May 14, 2023
- 1 min read
Updated: Nov 2, 2024
Use the below code to add button links to all your Knack live app pages enabling easy navigation to the Top and Bottom of long pages.
Add to 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;
}
background: lightgray;
margin-left: 10px;
}
Add to 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')
}
})
})
Comments