Skip to content

Commit

Permalink
Merge pull request #1076 from Sch476/codespace-friendly-barnacle-pxrj…
Browse files Browse the repository at this point in the history 
…r9qxvrph7j96

Resolved the "Scroll To Top" button issue
  • Loading branch information
@akshitagupta15june
akshitagupta15june authored Oct 2, 2023
2 parents 050e278 + 5eb767b commit 972a5ab
Showing 1 changed file with 89 additions and 56 deletions.
145 changes: 89 additions & 56 deletions blog.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -46,61 +46,76 @@
</button>
<nav class="">
<div class="hidden w-full lg:block z-2" id="navbar">
<ul class="w-[100vw] h-1/2 top-0 right-0 p-8 lg:p-4 mt-12 lg:mt-0 text-center text-base lg:text-lg space-y-4 lg:space-y-0 lg:space-x-5 lg:static lg:w-auto flex flex-col rounded-lg items-start lg:items-center lg:bg-transparent lg:border-0 lg:flex-row justify-between">
<li>
<a href="./index.html" class="text-custom-heading font-bold hover:underline underline-offset-4 turn-red-hover navbar-item">Home</a>
</li>
<li>
<a href="./news.html" class="text-custom-heading font-bold hover:underline underline-offset-4 turn-red-hover navbar-item">Pet News</a>
</li>
<li>
<a href="./blog.html" class="text-custom-heading font-bold hover:underline underline-offset-4 turn-red-hover navbar-item">Blogs</a>
</li>
<li>
<a href="./donate.html" class="text-custom-heading font-bold hover:underline underline-offset-4 turn-red-hover navbar-item">Donate</a>
</li>
<li>
<div x-data="{ open: false }" @mouseleave="open = false" class="relative">
<a @mouseover="open = true" class="text-custom-heading flex font-bold hover:underline underline-offset-4 turn-red-hover navbar-item w-full">
Support Us
<svg xmlns="http://www.w3.org/2000/svg" width="14px" height="14px" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="mt-1">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
</svg>
</a>
<div x-show="open" class="z-20 absolute -left-1 w-[7.5rem] py-2 bg-gray-100 rounded-md shadow-xl">
<a href="volunteer.html" class="block px-4 py-2 text-base text-gray-300 text-gray-700 hover:bg-gray-400 hover:text-white">Become a Volunteer</a>
</div>
<ul
class="w-[100vw] h-1/2 top-0 right-0 p-8 lg:p-4 mt-12 lg:mt-0 text-center text-base lg:text-lg space-y-4 lg:space-y-0 lg:space-x-5 lg:static lg:w-auto flex flex-col rounded-lg items-start lg:items-center lg:bg-transparent lg:border-0 lg:flex-row justify-between">
<li>
<a href="./index.html"
class="text-custom-heading font-bold hover:underline underline-offset-4 turn-red-hover navbar-item">Home</a>
</li>
<li>
<a href="./news.html"
class="text-custom-heading font-bold hover:underline underline-offset-4 turn-red-hover navbar-item">Pet
News</a>
</li>
<li>
<a href="./blog.html"
class="text-custom-heading font-bold hover:underline underline-offset-4 turn-red-hover navbar-item">Blogs</a>
</li>
<li>
<a href="./donate.html"
class="text-custom-heading font-bold hover:underline underline-offset-4 turn-red-hover navbar-item">Donate</a>
</li>
<li>
<div x-data="{ open: false }" @mouseleave="open = false" class="relative">
<a @mouseover="open = true"
class="text-custom-heading flex font-bold hover:underline underline-offset-4 turn-red-hover navbar-item w-full">
Support Us
<svg xmlns="http://www.w3.org/2000/svg" width="14px" height="14px" fill="none" viewBox="0 0 24 24"
stroke="currentColor" class="mt-1">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
</svg>
</a>
<div x-show="open" class="z-20 absolute -left-1 w-[7.5rem] py-2 bg-gray-100 rounded-md shadow-xl">
<a href="volunteer.html"
class="block px-4 py-2 text-base text-gray-300 text-gray-700 hover:bg-gray-400 hover:text-white">Become
a Volunteer</a>
</div>
</div>
</li>
<li>
<a href="./reportstary.html"
class="text-custom-heading font-bold hover:underline underline-offset-4 turn-red-hover navbar-item">SOS
Report</a>
</li>
<li>
<a href="./index.html#contact">
<button
class="inline-flex items-center bg-header-orange-light border-0 py-2 lg:py-2 text-base px-2 focus:outline-none text_4 font-bold rounded text-base mt-4 md:mt-0">
Contact Us
<svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
class="w-4 h-4 ml-1" viewBox="0 0 24 24">
<path d="M5 12h14M12 5l7 7-7 7"></path>
</svg>
</button>
</a>
</li>
<li>
<a id="theme-toggle">
<img src="Assets/Images/sun.svg" width="50px" id="switch" />
</a>
</li>
<!-- google translate -->
<div id="google_translate_element">
<script type="text/javascript"
src="https://translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
</div>
</li>
<li>
<a href="./reportstary.html" class="text-custom-heading font-bold hover:underline underline-offset-4 turn-red-hover navbar-item">SOS Report</a>
</li>
<li>
<a href="./index.html#contact">
<button class="inline-flex items-center bg-header-orange-light border-0 py-2 lg:py-2 text-base px-2 focus:outline-none text_4 font-bold rounded text-base mt-4 md:mt-0">
Contact Us
<svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="w-4 h-4 ml-1" viewBox="0 0 24 24">
<path d="M5 12h14M12 5l7 7-7 7"></path>
</svg>
</button>
</a>
</li>
<li>
<a id="theme-toggle">
<img src="Assets/Images/sun.svg" width="50px" id="switch"/>
</a>
</li>
<!-- google translate -->
<div id="google_translate_element">
<script type="text/javascript" src="https://translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
</div>
</ul>
</div>
</nav>
</nav>

</header>



<!---Blogs container-->
<section class="main-body-section">
Expand All @@ -122,17 +137,17 @@ <h1 class="xl:-mt-7 mb-2 text-black text-4xl leading-tight font-bold text-center
</div>
</section>

<!-- back to top button -->
<li>
<!-- back to top button -->
<li>
<a href="#top">
<button id="bttbutton" title="backtotop">
<img src="Assets/Images/uparrow.png" width="20" height="25" />
<button id="bttbutton" onclick="topFunction()" title="backtotop">
<img src="./image.svg" class="w-6 md:w-10 md:object-left" />
</button>
</a>
</li>

<!--end of back to top button -->

<!-- Footer section -->


Expand Down Expand Up @@ -218,9 +233,27 @@ <h3 class="text-2xl text-center">Subscribe to our newsletter</h3>
</div>
</div>
<div id="copyright">
<p>Copyright &copy; 2022 [PetMe] All Right Reserved.</p>
</div>
<p>Copyright &copy; 2022 [PetMe] All Right Reserved.</p>
</div>
</footer>
<script>
let mybutton = document.getElementById("bttbutton");
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;
document.documentElement.scrollTop = 0;
}
</script>

<script src="index.js"></script>
<script src="light-dark-theme.js"></script>
Expand Down

0 comments on commit 972a5ab

Please sign in to comment.