From 3a0622b2b018a4a9247993ae13777a7bbf2806fd Mon Sep 17 00:00:00 2001 From: Rajat Rajput Date: Sat, 7 Oct 2023 10:58:46 +0530 Subject: [PATCH 1/2] added smooth scrolling, back to top button --- css/style.css | 26 +++++++++++++++++++++++++- index.html | 2 ++ js/top.js | 18 ++++++++++++++++++ 3 files changed, 45 insertions(+), 1 deletion(-) create mode 100644 js/top.js diff --git a/css/style.css b/css/style.css index 80b40f9..4585764 100644 --- a/css/style.css +++ b/css/style.css @@ -1,3 +1,6 @@ +html{ + scroll-behavior: smooth; +} @font-face { font-family: "montserrat"; src: url("../assets/fonts/Montserrat.ttf") format("ttf"); @@ -236,4 +239,25 @@ main .container-main .container-main__content .section-container { .article-container { margin: 2.3em 0; } -}/*# sourceMappingURL=style.css.map */ \ No newline at end of file +}/*# sourceMappingURL=style.css.map */ + +/* Scroll To Top */ +#backToTop { + display: none; /* Hidden by default */ + position: fixed; /* Fixed/sticky position */ + bottom: 20px; /* Place the button at the bottom of the page */ + right: 30px; /* Place the button 30px from the right */ + z-index: 99; /* Make sure it does not overlap */ + border: none; /* Remove borders */ + outline: none; /* Remove outline */ + background-color: #c07534; /* Set a background color */ + color: white; /* Text color */ + cursor: pointer; /* Add a mouse pointer on hover */ + padding: 15px; /* Some padding */ + border-radius: 10px; /* Rounded corners */ + font-size: 18px; /* Increase font size */ +} + +#backToTop:hover { + background-color: #555; /* Add a dark-grey background on hover */ +} \ No newline at end of file diff --git a/index.html b/index.html index 32731c1..a819b6e 100644 --- a/index.html +++ b/index.html @@ -5,8 +5,10 @@ STM Constitution + + diff --git a/js/top.js b/js/top.js new file mode 100644 index 0000000..10872d6 --- /dev/null +++ b/js/top.js @@ -0,0 +1,18 @@ +let mybutton = document.getElementById("backToTop"); + +// When the user scrolls down 20px from the top of the document, show the button +window.onscroll = function() {scrollFunction()}; + +function scrollFunction() { + if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) { + mybutton.style.display = "block"; + } else { + mybutton.style.display = "none"; + } +} + +// When the user clicks on the button, scroll to the top of the document +function topFunction() { + document.body.scrollTop = 0; // For Safari + document.documentElement.scrollTop = 0; // For Chrome, Firefox, IE and Opera +} \ No newline at end of file From 46a65ef8317cdc951200762c5d59558fb4523569 Mon Sep 17 00:00:00 2001 From: Rajat Rajput Date: Sat, 7 Oct 2023 15:11:12 +0530 Subject: [PATCH 2/2] added smooth scrolling, back to top button --- css/style.css | 23 ----------------------- css/style.scss | 25 +++++++++++++++++++++++++ index.html | 3 +-- js/opencodelaw.js | 25 +++++++++++++++++++++++++ js/top.js | 18 ------------------ 5 files changed, 51 insertions(+), 43 deletions(-) delete mode 100644 js/top.js diff --git a/css/style.css b/css/style.css index 4585764..2fba47d 100644 --- a/css/style.css +++ b/css/style.css @@ -1,6 +1,3 @@ -html{ - scroll-behavior: smooth; -} @font-face { font-family: "montserrat"; src: url("../assets/fonts/Montserrat.ttf") format("ttf"); @@ -241,23 +238,3 @@ main .container-main .container-main__content .section-container { } }/*# sourceMappingURL=style.css.map */ -/* Scroll To Top */ -#backToTop { - display: none; /* Hidden by default */ - position: fixed; /* Fixed/sticky position */ - bottom: 20px; /* Place the button at the bottom of the page */ - right: 30px; /* Place the button 30px from the right */ - z-index: 99; /* Make sure it does not overlap */ - border: none; /* Remove borders */ - outline: none; /* Remove outline */ - background-color: #c07534; /* Set a background color */ - color: white; /* Text color */ - cursor: pointer; /* Add a mouse pointer on hover */ - padding: 15px; /* Some padding */ - border-radius: 10px; /* Rounded corners */ - font-size: 18px; /* Increase font size */ -} - -#backToTop:hover { - background-color: #555; /* Add a dark-grey background on hover */ -} \ No newline at end of file diff --git a/css/style.scss b/css/style.scss index 3c0bdbf..5469c26 100644 --- a/css/style.scss +++ b/css/style.scss @@ -5,6 +5,7 @@ font-weight: normal; font-style: normal; } + @font-face { font-family: "cuprumregular"; src: url("../assets/fonts/cuprum-variablefont_wght-webfont.woff") @@ -20,6 +21,9 @@ $box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.18); margin: 0; padding: 0; } +html{ + scroll-behavior: smooth; +} body { background-color: #f5f5f5; font-family: $primary-font; @@ -239,3 +243,24 @@ main { margin: 2.3em 0; } } + + +#backToTop { + display: none; + position: fixed; + bottom: 20px; + right: 30px; + z-index: 1000; + border: none; + outline: none; + background-color: #c07534; + color: white; + cursor: pointer; + padding: 15px; + border-radius: 10px; + font-size: 18px; + + &:hover { + background-color: #555; + } +} \ No newline at end of file diff --git a/index.html b/index.html index a819b6e..3c6a98c 100644 --- a/index.html +++ b/index.html @@ -5,12 +5,11 @@ STM Constitution - - + diff --git a/js/opencodelaw.js b/js/opencodelaw.js index d3ff6d2..831aeae 100644 --- a/js/opencodelaw.js +++ b/js/opencodelaw.js @@ -290,3 +290,28 @@ fetch(src) .catch((error) => { console.error("Error loading YAML data:", error); }); + window.addEventListener("scroll", scrollFunction); + + function scrollFunction() { + const topButton = document.getElementById("backToTop"); + + if ( + document.body.scrollTop > 20 || + document.documentElement.scrollTop > 20 + ) { + topButton.style.display = "block"; + console.log("Block"); + } else { + topButton.style.display = "none"; + console.log("None"); + } + } + + // When the button is clicked, scroll to the top of the document + function topFunction() { + document.body.scrollIntoView({ behavior: "smooth", block: "start" }); + } + + // Add this event listener to handle button click + const topButton = document.getElementById("backToTop"); + topButton.addEventListener("click", topFunction); \ No newline at end of file diff --git a/js/top.js b/js/top.js deleted file mode 100644 index 10872d6..0000000 --- a/js/top.js +++ /dev/null @@ -1,18 +0,0 @@ -let mybutton = document.getElementById("backToTop"); - -// When the user scrolls down 20px from the top of the document, show the button -window.onscroll = function() {scrollFunction()}; - -function scrollFunction() { - if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) { - mybutton.style.display = "block"; - } else { - mybutton.style.display = "none"; - } -} - -// When the user clicks on the button, scroll to the top of the document -function topFunction() { - document.body.scrollTop = 0; // For Safari - document.documentElement.scrollTop = 0; // For Chrome, Firefox, IE and Opera -} \ No newline at end of file