how to smooth scroll in javascript


window.scrollTo({ top: 900, behavior: 'smooth' })

html {
scroll-behavior: smooth;
}

/* No support in IE, or Safari
You can use this JS polyfill for those */
http://iamdustan.com/smoothscroll/

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
// Add smooth scrolling to all links
$("a").on('click', function(event) {
// Make sure this.hash has a value before overriding default behavior
if (this.hash !== "") {
// Prevent default anchor click behavior
event.preventDefault();
// Store hash
var hash = this.hash;
$('html, body').animate({
scrollTop: $(hash).offset().top
}, 800, function(){
// Add hash (#) to URL when done scrolling (default click behavior)
window.location.hash = hash;
});
} // End if
});
});
</script>

www.codegrepper.com
www.stackoverflow.com

how to scroll to an element javascript react


class ReadyToScroll extends Component {

constructor(props) {
super(props)
this.myRef = React.createRef()
}

render() {
return <div ref={this.myRef}></div>
}

scrollToMyRef = () => window.scrollTo(0, this.myRef.current.offsetTop)
// run this method to execute scrolling.

}

import React, { useRef } from 'react'

const scrollToRef = (ref) => window.scrollTo(0, ref.current.offsetTop)
// General scroll to element function

const ScrollDemo = () => {

const myRef = useRef(null)
const executeScroll = () => scrollToRef(myRef)

return (
<>
<div ref={myRef}>I wanna be seen</div>
<button onClick={executeScroll}> Click to scroll </button>
</>
)
}

import { scroller } from "react-scroll";

// excluded React component syntax...

scrollToSection = () => {
scroller.scrollTo("your_css_class_here", {
duration: 800,
delay: 0,
smooth: "easeInOutQuart",
});
};

www.codegrepper.com
www.stackoverflow.com

how to remove horizontal scroll on elementor


(function (debug) {
var w = debug.documentElement.offsetWidth,
t = debug.createTreeWalker(debug.body, NodeFilter.SHOW_ELEMENT),
b;
while (t.nextNode()) {
b = t.currentNode.getBoundingClientRect();
if (b.right > w || b.left < 0) {
t.currentNode.style.setProperty('outline', '1px dotted red', 'important');
console.log(t.currentNode);
}
};
}(document));

www.codegrepper.com
www.stackoverflow.com