top of page

Go to Top / Bottom

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')

}

})

})


35 views0 comments

Recent Posts

See All

Comments


bottom of page