Take Control of Your Reading Experience with Our New Navigation Features!Ever found yourself lost in the sea of information, trying to locate a specific section on a webpage? We understand the struggle and, as a solution, we're proud to introduce our new user-friendly navigation system on IFalls.News! As part of our ongoing commitment to enhance your experience and make our content as accessible as possible, we've redesigned our site navigation. Now, reading news has never been so effortless and satisfying! Our new feature includes a set of smart and intuitive scroll buttons that are designed to make your reading experience smoother and more efficient. These buttons, found on the left side of your screen, are here to assist you as you navigate through our articles. Meet Your New Best Friends: The Scroll ButtonsLet's get acquainted with these newly introduced scroll buttons: ![]() Go to Top of Page Button: Just finished reading a riveting article and want to read it again? Simply click this button to swiftly navigate to the top of the page. ![]() Go to Top Button: This button will take you to the top of the nearest section above your current position, making it easier to revisit recently read sections. ![]() Go to Bottom Button: Want to skip ahead? Use this button to jump to the beginning of the next section without endlessly scrolling. ![]() Go to Bottom of Page Button: Found what you came for and ready to move on? Click this button to quickly jump to the end of the article. Boost Your Reading Experience in 3 Easy StepsGet started with your enhanced reading journey in just three simple steps:
With this improved navigation system, we're hoping to put you in control, making your time with us more enjoyable and less stressful. As always, we're eager to hear your feedback. Please feel free to share your thoughts and suggestions as we continue to improve and adapt to serve you better. Happy reading!
View the Code
<head>
<style> #scrollButtons { position: fixed; z-index: 9999; left: 0px; top: 30%; width: 60px; padding-left: 0; } #scrollButtons .scrollButton { border: none; outline: none; background-color: transparent; cursor: pointer; width: 100%; height: auto; } #collapseButton, #expandButton { background-color: #FAC94D; width: 30px; height: 30px; border: none; cursor: pointer; } @media (max-height: 600px) { #scrollToTop, #scrollToBottom { display: none !important; } } </style> </head> <body> <div id="scrollButtons"> <button id="collapseButton" onclick="collapseFunction()">-</button> <button id="expandButton" onclick="expandFunction()" style="display: none;">+</button> <button onclick="topPageFunction()" id="scrollPageToTop" class="scrollButton" title="Go to top of page"><img src="https://www.ifalls.news/uploads/1/0/1/6/101650906/page-up_orig.png" alt="Go to top of page" style="width: 100%; height: auto;"></button> <button onclick="topFunction()" id="scrollToTop" class="scrollButton" title="Go to top"><img src="https://www.ifalls.news/uploads/1/0/1/6/101650906/section-up_orig.png" alt="Go to top" style="width: 100%; height: auto;"></button> <button onclick="bottomFunction()" id="scrollToBottom" class="scrollButton" title="Go to bottom"><img src="https://www.ifalls.news/uploads/1/0/1/6/101650906/section-down_orig.png" alt="Go to bottom" style="width: 100%; height: auto;"></button> <button onclick="bottomPageFunction()" id="scrollPageToBottom" class="scrollButton" title="Go to bottom of page"><img src="https://www.ifalls.news/uploads/1/0/1/6/101650906/page-down_orig.png" alt="Go to bottom of page" style="width: 100%; height: auto;"></button> </div> <script> var collapseButton = document.getElementById('collapseButton'); var expandButton = document.getElementById('expandButton'); var scrollButtons = document.querySelectorAll('.scrollButton'); var topButton = document.getElementById("scrollToTop"); var bottomButton = document.getElementById("scrollToBottom"); var topPageButton = document.getElementById("scrollPageToTop"); var bottomPageButton = document.getElementById("scrollPageToBottom"); var isCollapsed = false; window.onscroll = function() {scrollFunction()}; function collapseFunction() { scrollButtons.forEach(function(button) { button.style.display = 'none'; }); collapseButton.style.display = 'none'; expandButton.style.display = 'block'; isCollapsed = true; } function expandFunction() { scrollButtons.forEach(function(button) { button.style.display = 'block'; }); expandButton.style.display = 'none'; collapseButton.style.display = 'block'; isCollapsed = false; scrollFunction(); } function scrollFunction() { if (isCollapsed) { return; } var allSections = document.querySelectorAll("[data-section]"); var userPosition = window.pageYOffset || document.documentElement.scrollTop; var nearestAboveSection = null; var nearestBelowSection = null; allSections.forEach(function(section) { var sectionTop = section.getBoundingClientRect().top + window.pageYOffset; if (sectionTop < userPosition) { if (!nearestAboveSection || sectionTop > nearestAboveSection.getBoundingClientRect().top + window.pageYOffset) { nearestAboveSection = section; } } var sectionBottom = section.getBoundingClientRect().bottom + window.pageYOffset; if (sectionBottom > userPosition) { if (!nearestBelowSection || sectionBottom < nearestBelowSection.getBoundingClientRect().bottom + window.pageYOffset) { nearestBelowSection = section; } } }); topButton.style.display = nearestAboveSection ? "block" : "none"; bottomButton.style.display = nearestBelowSection ? "block" : "none"; topPageButton.style.display = userPosition > 0 ? "block" : "none"; bottomPageButton.style.display = userPosition + window.innerHeight < document.documentElement.scrollHeight ? "block" : "none"; } function topFunction() { var allSections = document.querySelectorAll("[data-section]"); var userPosition = window.pageYOffset || document.documentElement.scrollTop; var nearestAboveSection = null; allSections.forEach(function(section) { var sectionTop = section.getBoundingClientRect().top + window.pageYOffset; if (sectionTop < userPosition) { if (!nearestAboveSection || sectionTop > nearestAboveSection.getBoundingClientRect().top + window.pageYOffset) { nearestAboveSection = section; } } }); if (nearestAboveSection) { var topPos = nearestAboveSection.getBoundingClientRect().top + window.pageYOffset; window.scrollTo({ top: topPos, behavior: 'smooth' }); } } function bottomFunction() { var allSections = document.querySelectorAll("[data-section]"); var userPosition = window.pageYOffset || document.documentElement.scrollTop; var nearestBelowSection = null; allSections.forEach(function(section) { var sectionBottom = section.getBoundingClientRect().bottom + window.pageYOffset; if (sectionBottom > userPosition) { if (!nearestBelowSection || sectionBottom < nearestBelowSection.getBoundingClientRect().bottom + window.pageYOffset) { nearestBelowSection = section; } } }); if (nearestBelowSection) { var bottomPos = nearestBelowSection.getBoundingClientRect().top + window.pageYOffset; window.scrollTo({ top: bottomPos, behavior: 'smooth' }); } } function topPageFunction() { document.body.scrollTop = 0; document.documentElement.scrollTop = 0; } function bottomPageFunction() { var scrollHeight = document.documentElement.scrollHeight; document.body.scrollTop = scrollHeight; document.documentElement.scrollTop = scrollHeight; } </script> </body>
0 Comments
|
Ted Saxton and TedBotAll articles contain some level of assistance from artificial intelligence. The content the AI is trained on is publicly available and will often be cited in the article whenever possible. |