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