Try ShortPoint nowSharePoint pages with minimal content, like the one below, will display the ShortPoint footer in the middle of the page rather than at the bottom:
This article demonstrates how to keep the ShortPoint footer at the bottom of your page using JavaScript.
TABLE OF CONTENTS
Prerequisites
- You must have the latest version of ShortPoint SPFx installed on your SharePoint environment.
- You must be a ShortPoint Designer with an active license.
- You must already have a ShortPoint footer on your page. To add a footer, check out Getting Started with ShortPoint Footer for SharePoint.
Interactive Tutorial
Before starting the interactive tutorial, copy the JavaScript below:
function setMinHeightToScrollContent() {
if (window.location.href.includes('_layouts/')) {
return;
}
const contentElement = document.querySelector('.shortpoint-proxy-theme-scroll-content');
const footerElement = document.querySelector('.shortpoint_footer_wrap');
if (contentElement && footerElement) {
const contentHeight = contentElement.scrollHeight;
const windowHeight = window.innerHeight;
if (contentHeight >= windowHeight) {
return;
}
const contentRect = contentElement.getBoundingClientRect();
const contentPositionFromTop = contentRect.top + window.scrollY;
const footerHeight = footerElement.offsetHeight;
const totalOffset = footerHeight + contentPositionFromTop;
contentElement.style.minHeight = `calc(100vh - ${totalOffset}px)`;
}
}
setTimeout(() => {
setMinHeightToScrollContent();
}, 3000);
window.addEventListener('resize', setMinHeightToScrollContent);Step-by-step Tutorial
Follow the steps below to keep your ShortPoint footer at the bottom of the page:
NOTEBefore proceeding, make sure you already have a ShortPoint footer on your page. To add a footer, check out Getting Started with ShortPoint Footer for SharePoint.
Step 1: Copy JavaScript Code
- Copy the JavaScript code below:
function setMinHeightToScrollContent() {
if (window.location.href.includes('_layouts/')) {
return;
}
const contentElement = document.querySelector('.shortpoint-proxy-theme-scroll-content');
const footerElement = document.querySelector('.shortpoint_footer_wrap');
if (contentElement && footerElement) {
const contentHeight = contentElement.scrollHeight;
const windowHeight = window.innerHeight;
if (contentHeight >= windowHeight) {
return;
}
const contentRect = contentElement.getBoundingClientRect();
const contentPositionFromTop = contentRect.top + window.scrollY;
const footerHeight = footerElement.offsetHeight;
const totalOffset = footerHeight + contentPositionFromTop;
contentElement.style.minHeight = `calc(100vh - ${totalOffset}px)`;
}
}
setTimeout(() => {
setMinHeightToScrollContent();
}, 3000);
window.addEventListener('resize', setMinHeightToScrollContent);Step 2: Open Theme Builder
- Go to the SharePoint page you want to use and click the ShortPoint icon:
- Select Theme Builder.
Step 3: Open Custom JavaScript
- Go to Utilities.
- Select Custom JavaScript.
Step 4: Paste and Apply Code
- Paste the code in the field provided.
- Click Apply:
Step 5: Publish
- Once satisfied, Publish your changes.
Congratulations! Your ShortPoint footer is now fixed at the bottom of the page:
Related articles:
