JS not selecting my element
Hello, I was trying to copy a design I found.
It’s a “scroll to top” button. But the problem is it doesn’t work. I will provide code and some details. I haven’t found any answers on internet.
HTML
<div class=“to-top”></div>
CSS
.to-top {
Position:fixed
Width: 2rem
Height:2rem
Bottom:5%
Left:%
Opacity:0
Transition: all .4s
Cursor:none
Background: url
Background-size: cover
}
.to-top.show {
Opacity:1
Bottom:5%
Cursor: pointer
}
JS
Const toTop = document.querySelect(“.to-top”);
toTop.addEventListener(“scroll”, () => {
If(window.scrollY > 100) {
toTop.classList.add(“show”);
} else {
toTop.classList.remove(“show”);
} )
Sorry for indentation and semicolons in css a wrote it all on phone and from memory. So please be patient with me. But I can’t sleep I need answers 😆.
Also I used ID of an element so if you click it goes to top already. But the problem is that the button never shows up. I want it to show up latter. So that’s why “scrollY > 100”
Also I’m using parallax effect on the page so its in wrapper which is set to width 100vh. Could that be a problem? That the pageYOffset or scrollY is not taking in any value?
Also 2. It doesn’t show any JS event when I inspect the element with Mozilla web tools
Can anyone help?
🙏🏼 thank you
35 Replies
I've never done this before but I'll make a codepen and see
the html code is missing, which is an extremely important part to debug this
anything else is just pure speculation
and i will speculate now: the script it in the
<head>Accessibility wise I'm sure there could be improvements but I'm not good with accessibility yet
I’ll send the html once I’m back at pc. But I’ll get to it tomorrow (Saturday)
Your seems to work fine, I’m sure there something wrong with detecting Y offset. But I couldn’t seen to figure it out. Again I’ll fill html once I’m back at pc
How are you loading the JS? If it's in the head, you need either the
defer attribute or type="module" to make sure the JS loads after the HTML, otherwise there will be no elements for the JS to select.that was my speculation
i would advise to move the script to the end of the body
this way, the js is the last thing to be read, after the html is rendered
Using the
defer attribute is preferable to that
That way you’re putting your elements where they belongthat's actually a good point
but you cant use it with inline javascript
but the async attribute works
Correct. But most scripts shouldn’t be inline anyway
there are good reasons to have some inline javascript
Async is different and doesn’t work like defer
i know
There’s an exception to every rule, yes.
indeed, but this one isnt
i found a downside to putting the script in the head with defer
the
DOMContentLoaded event is only triggered after the scripts load and are parsedNot sure how that’s a downside
Defer means the script is parsed after the DOM is loaded so you don’t need/shouldn’t use the DOMContentLoaded event
that event is triggered after all images are loaded as well
it can cause situations in which an image is loaded, but the script to deal with it is still waiting for everything to be ready
that can cause layout shifts that look weird
sure, it could (and should) be dealt in css as well
script is at the end of the body, also I have other JS lines that are there and work perfectly fine
is there anywhere where we can check the code?
also, have you tried this?
https://ekao81.github.io/goldenMines/ heres the github
thanks guys for helping
GitHub
GitHub - Ekao81/goldenMines
Contribute to Ekao81/goldenMines development by creating an account on GitHub.
I did not try this as my JS is working in the bottom of the body, do you think it would change anything if i put it in the head?
also when im trying to use elements from this codepen, its not working
class is not changing
the page doesnt seem to notice scroll event
IDK why
it worked fine for me
wdym now
You used code pen in my code?
or codepen elements, and put them in my code?
and it worked?
no, i saved everything into an html file
and opened it directly in the browser
But u mean mine code? Or a code pen
your code, from github
Ok. So wierd, I even deleted original JS and put in AOS library and it’s not working right either
I’ll try different browser
What are you using?
i was using google chrome
do you want the effect to happen once or more times?
Only one time.
OKAY, I reworked it all the way, there was also issue with live server extension in my vscode, that it was not displaying right.
So I guess problem solved but not really
Thanks all for help.
what's the new problem?
Hah I don’t even know if it’s right to try to solve it here or create another thread
The problem is - translateX and filter blur did not work right in phone browsers for me. So I tried to use AOS library but there is also a problem with putting aos attributes to h1 tags
So it doesn’t work right either
how about an svg with a gausian blur?
No idea what’s that
I’ll check that out
i think i spelled it correctly
but it is an svg with a blur