top of page

Go to Top / Bottom

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;

}


#go-to-top, #go-to-bottom {

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

Rated 0 out of 5 stars.
No ratings yet

Add a rating
  • Black LinkedIn Icon
  • Black Twitter Icon
  • Youtube

©2022 CH Project Support Limited

bottom of page