How To Stop Link Component From Scrolling To The Top?

At a glance

The community member has a "link button" that triggers a script but also scrolls back to the top of the site, which they don't want. The comments suggest using a button component instead of a link, and using e.preventDefault() to prevent the default link behavior. The comments also discuss the difference between links and buttons, with links being for navigation and buttons being for triggering actions. The community member notes that they previously couldn't use a button but now it works with their script.

Useful resources

᲼᲼Amin

I have link "button" which doesn't go to an external website but triggers something in my script, but while it triggers my script it also scrolls back to the top of the site, but I don't want that to happen. How can I overcome this?

᲼

5 comments

JJohn Siciliano

Maybe use a button component instead?

And or use e.preventdefault

JJohn Siciliano

https://developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault

JJeremy

https://youtu.be/CLY_Kj8Qdr0?si=-PK4Yw1D5I-IQbXj at 35s the define the difference between a link and button. It's a good rule to follow.

JJeremy

Simplistically:
links = link to something
buttons = trigger some action (forms, js, action)

᲼᲼Amin

Thank you, I didn't use a button because a long time ago it wouldn't work with my script but somehow now it does work

Add a reply

Join the Webstudio community

How To Stop Link Component From Scrolling To The Top?