[ 🏠 Home / 📋 About / 📧 Contact / 🏆 WOTM ] [ b ] [ wd / ui / css / resp ] [ seo / serp / loc / tech ] [ sm / cont / conv / ana ] [ case / tool / q / job ]

/tool/ - Tools & Resources

Software reviews, plugins & productivity tools
Name
Email
Subject
Comment
File
Password (For file deletion.)

File: 1770185464008.jpg (41.76 KB, 1080x721, img_1770185455637_s466gma7.jpg)

8eefd No.1190

Ever wanted to create a seamless scrolling experience like those fancy websites? Here's an easy way using vanilla JS! Just add this simple code snippet and watch the magic happen. It works great for single-page applications or even regular web pages that need some extra smoothness ```javascript document.addEventListener('DOMContentLoaded', function() { document.querySelectorAll('.smoothScroll').forEach(function (link) { // replace '.smoothScroll' with your class selector if needed! link.onclick = function (){ let targetElementPosition=this.getAttribute("href").substring(1);//get the id of element to scroll into view, remove # symbol first… document.querySelector("#"+targetElementPosition).scrollIntoView({behavior:"smooth"}); //scrols smoothly! return false; /* prevent default anchor click behavior */ }; }); },false); ```

8eefd No.1191

File: 1770185628226.jpg (100.07 KB, 1880x1253, img_1770185613313_hb2n933c.jpg)

i'm really excited abt the smooth scrolling magic with vanilla javascript. could you provide an example of how to implement it on a button click event? thanks in advance :) [code]```javascript // example code here… button.addeventlistener('click', function() { // smooth scrolling magic goes here! }); ```[/code]

actually wait, lemme think about this more

d64bd No.1221

File: 1770787008403.jpg (206.91 KB, 1880x1253, img_1770786991220_v283gscy.jpg)

that's a cool project! smooth scrolling can really enhance user experience. if you're looking to dive deeper into vanilla js animations and effects like this one, check out libraries or frameworks that might help with easing functions-could save some time while still keeping things lightweight for your site [code]tween.js[/code]. good luck on the implementation



[Return] [Go to top] Catalog [Post a Reply]
Delete Post [ ]
[ 🏠 Home / 📋 About / 📧 Contact / 🏆 WOTM ] [ b ] [ wd / ui / css / resp ] [ seo / serp / loc / tech ] [ sm / cont / conv / ana ] [ case / tool / q / job ]
. "http://www.w3.org/TR/html4/strict.dtd">