Reputation: 1994
I am trying to click a button which scrolls down to a specific portion of my app. So currently I have:
class Nav extends Component {
foo(){
console.log('baz')
window.scrollTo(0, 100);
}
render() {
return (
<nav>
<a href="#" onClick={()=> this.foo()}>About</a>
</nav>
);
}
}
This will console.log "baz" but won't scroll down to 100
Upvotes: 1
Views: 3022
Reputation: 536
Checkout this quick example for your desired result:
import React from 'react';
function ScrollExample() {
const handleScrollButtonClick = () => {
// Scroll down by 100 pixels vertically
window.scrollBy(0, 100);
};
return (
<div>
<button onClick={handleScrollButtonClick}>Scroll Down</button>
<div style={{ height: '1000px' }}>
{/* Content to create a scrollable area */}
</div>
</div>
);
}
export default ScrollExample;
Upvotes: 0
Reputation: 1
We have to prevent the default action of the anchor tag using event.preventDefault() method and change href="#" to href="/" in anchor tag
class Nav extends Component {
foo(event){
event.preventDefault();
console.log('baz')
window.scrollTo(0, 100);
}
render() {
return (
<nav>
<a href="/" onClick={(event)=> this.foo(event)}>About</a>
</nav>
);
}
}
Upvotes: 0
Reputation: 1
import react from "react";
const Stchange = ()=>{
const dev = ()=>{
window.scrollBy(0,50);
}
return(
<>
<button onClick={dev}>Scroll</button>
<h1>There are man struc Lorem Ipsum which looks reasonable. The</h1>
</>
)
}
export default Stchange;
Upvotes: 0
Reputation: 1
You can do like this -
const handleRef = (param) => window.scrollTo(0, param);
<p onClick={()=> handleRef(1000)} >Drops</p>
Upvotes: 0
Reputation: 17354
Remove the
href="#"
This is causing the link to link the top of the page
Upvotes: 1