Scribd
Upload
6 views1 page

Const Const Const Const Const: Document Document Document Document Document

Codes

Uploaded by

rijudubey8
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
6 views1 page

Const Const Const Const Const: Document Document Document Document Document

Codes

Uploaded by

rijudubey8
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 1

1 // Menu Toggle

2 // Set variables for menu toggle, nav links and bars


3 const menuToggle = document.querySelector('#showMenu');
4 const navLink = document.querySelector('#navLinks');
5 const hideBar = document.querySelector('#hideBar');
6 const barTop = document.querySelector('#barTop');
7 const barBottom = document.querySelector('#barBottom');
8
9 // Show menu toggle
10 if (menuToggle) {
11 menuToggle.addEventListener('click', (e) => {
12 navLink.classList.toggle('show-menu');
13 hideBar.classList.toggle('hide-bar');
14 barTop.classList.toggle('rotate-bar-top');
15 barBottom.classList.toggle('rotate-bar-bottom');
16 });
17 }
18
19
20 // Scroll to top button
21 // Set a variable for scroll to top button
22 const scrollToTop = document.querySelector('#scrollButton');
23
24 // Set up a function if the window scroll down to height 500px then show button
25 window.addEventListener("scroll", () => {
26
27 // Get the current scroll height value
28 const windowHeight = window.scrollY;
29
30 // If the scroll height value is greater than the window height, add style
inline-css in button
31 if (windowHeight > 500) {
32 scrollToTop.style.display = 'block';
33 } else {
34 scrollToTop.style.display = 'none';
35 }
36 });
37
38
39 // Setup a function with animate scroll to top slower / smoother
40 const animateScroll = () => {
41
42 // Set a variable for the number of pixels from the top of the document.
43 const heightScroll = document.documentElement.scrollTop || document.body.scrollTop;
44
45 // If heightScroll value is greater than 0, scroll to top of the document.
46 // Animate scroll with method requestAnimationFrame:
47 if (heightScroll > 0) {
48 window.requestAnimationFrame(animateScroll);
49
50 // ScrollTo takes x and y coordinate.
51 // Increase the '15' value to get a smoother/slower scroll
52 window.scrollTo(0, heightScroll - heightScroll / 15);
53 }
54 }
55
56 // When the button clicked, run animateScroll function
57 scrollToTop.onclick = function () {
58 animateScroll();
59 }

You might also like