DEV Community

Discussion on: Pure CSS Smooth-Scroll "Back to Top"

Collapse
 
dancingpot profile image
DancingPot

Thank you for replying Stephanie!
It's in the Codepen original demo. I've tried in Firefox, Chrome and Brave (faster chromium based browser) and I don't see a difference (even when commenting out the property). Ditto on the MDN site. It's not clear to me what this smooth scrolling action should look like, all I see is BOOM, right back to the top. User agents can ignore the property, but I checked the settings of each browser and smooth scrolling is enabled (in my Win10 settings as well) ... unless it's an add-on/extension that is the culprit (I haven't gone to that extent in my testing though).

I know it's not a big deal, but it does raise a couple of questions: a) how can I properly test something if I can't even see it locally despite the property being implemented in most browsers? and b) can I trust tools such as Codepen and the like to give me an unbiased result? I mean...smooth scrolling isn't going to break a site, but...what else WILL, if I am given the impression things are hunky dory (or not) and I implement a site following what I'm being "told" is functional? You know what I mean? I'm a toddler with web dev so maybe I'm barking up the wrong tree, but I was a programmer in a former life. Oh and I also noticed the Top button is displaying sort of, well, weird (I include a screenshot to show you). Best regards!

Thread Thread
 
5t3ph profile image
Stephanie Eckles

I've just been able to test on Win10 and it's working (testing my CodePen demo, no changes) so I'm sorry but I'm not sure what to suggest!

I probably shouldn't have used an emoji - the Mac version of the "top" emoji is more minimal but I see the Win is blocky :) I will add a note to update it to perhaps an SVG for more consistent results, thanks for the callout!

CodePen shouldn't be explicitly getting in the way of rendering. The only time I've occasionally run into issues is if I keep the "Normalize" CSS reset which is a bit heavy handed for modern browsers. I just removed it from the Pen juuuuust in case it makes a difference! If not, I'm sorry but I'm not sure what else other than something unique to your system. Good luck with your web dev journey!

Thread Thread
 
dancingpot profile image
DancingPot

Ok, thanks!
I retested on the MDN site after pressing Submit and it WAS working (I must have not tested correctly), but still NOT working on the Codepen (which I reloaded).
Oh, wait....(breaking news sound effect)...I just found (via MDN's super documentation) a setting in my Win10 setup re: showing animations...and it was turned OFF! Activating it made the smooth scroll work on your Codepen! Hhaaa!
Well...isn't that interesting and educational! LOOL! (mumbles something inaudible about Windows...)
Sorry to have bothered you with this...I had a feeling it was something higher up in the programming food chain!

Now I can continue going through your interesting articles on your site! :-) ^_^

Thread Thread
 
5t3ph profile image
Stephanie Eckles

Glad you got it worked out!