Can smooth scrolling be achieved using only CSS when clicking on an anchor link within a react component?
...
render(
<a href="#smooth-link">Link To There</a>
....
<div id="smooth-link">
....
</div>
)
Can smooth scrolling be achieved using only CSS when clicking on an anchor link within a react component?
...
render(
<a href="#smooth-link">Link To There</a>
....
<div id="smooth-link">
....
</div>
)
Consider this method for smooth scrolling:
/**
* Utilizing smooth scrolling within a specified element
*/
#my-element {
scroll-behavior: smooth;
}
/**
* Applying smooth scrolling to the entire document
*/
html {
scroll-behavior: smooth;
}
Source
However, some may argue that JavaScript provides a more effective solution:
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function (e) {
e.preventDefault();
document.querySelector(this.getAttribute('href')).scrollIntoView({
behavior: 'smooth'
});
});
});
If interested, you can explore this approach further in the documentation.
My previous experience involved utilizing tailwindcss, however, I discovered that it can still function without the need for tailwindcss.
All that is required is to include scroll-behavior:smooth in the html tag.
Navigate to your project's global .css file and insert this line at the beginning.
html {
scroll-behavior: smooth;
}Make sure to attach a click listener to the anchor tag within the <Link> element:
<Link href="#about">
<a className="nav-item" onClick={scrollHandle} id="about-">About Us</a>
</Link>
Here is the scrollHandler function for reference:
const scrollHandle = (e) => {
e.preventDefault();
let id = e.target.id;
let position = document.getElementById(id.slice(0, id.length - 1)); //remove last dash from id
window.location.href = "#" + id.slice(0, id.length - 1); //update URL
position && position.scrollIntoView({ behavior: "smooth", block: "start" }) // smoothly scroll to target
}
On mobile, I have a search field and a button working fine. However, when typing in something and hitting "search" on the phone's keyboard, it leads to a 404 error. But clicking the "search" button works as expected. I would like to be able to hit "se ...
Hey there! I've been working on creating checkboxes within next js that iterate through each filter and its options. Fortunately, I managed to get it up and running smoothly. However, I'm encountering an issue where checking one option in a speci ...
My inquiry pertains to the following function: function loadConfigurations(configs){ console.log(configs); } The 'configs' object received by the loadConfigurations function contains two properties --two arrays named "assigned" and "unassign ...
As I delve into the world of React, NextJs, and TypeScript, I stumbled upon a tutorial on creating a navbar inspired by the 'Strip' style menu. It has been quite a learning journey for me as a newbie in these technologies. After seeking help for ...
Consider this scenario: I am dealing with a list of arrays containing values like: let data = [ "10-45-23:45", "10-45-22:45", "10-45-20:45", "10-45-23:45", "10-45-23:59,00:00-04:59", "10-45-23:59, 0 ...
I have developed a ViolentMonkey userscript that adds an event listener to a button with the ID #mark-watched. When this button is clicked, it automatically triggers a click on the button with the ID #next-video. This functionality is necessary because the ...
Is there a way to style any <h1> element(s) that come after an <h2> element using only CSS? I've searched through countless pages of CSS documentation, trying to figure out if it's possible to target specific elements that appear AFT ...
Seeking a seamless transition from the background color to white at the top and bottom of the box, similar to the example screenshot. Current look: The top and bottom of the box are filled with the background color until the edge https://i.stack.imgur.com ...
How can I ensure that the input text linked to the selected radio option is filled in? For instance, in the example above: If Contact 1's Email radio option is chosen, the Email text field for Contact 1 must not be empty, while the Phone and US Mai ...
Greetings! I am a newcomer to Vue.js and I have encountered a problem that I need help with. In my component, there is a hidden input for files. When I click a button, the browser displays a window for importing files from my PC. Once I choose a file, I wa ...
When working in nodeJS, my code looks like this: path = 'public/MIN-1234'; path = path.split('/'); return path.join( process.cwd(), ...path); I was expecting to get: c:\CODE\public/MIN-1234 but instead, I got: `publ ...
This issue with a custom font embed is new to me. I have successfully used custom fonts on many client sites without any problems. One specific client has their own custom font files that are causing trouble. The application in question is embedded in an ...
I have been working on styling this div that displays the products for an e-commerce website. I initially used CSS and a table within it, but it seems like using tables for content is not recommended, so I am trying to find a better solution. However, my a ...
Hey everyone, I'm fairly new to React and I've encountered a problem. I'm attempting to create an app similar to Trello. Specifically, I need to be able to remove a component when I click on the close icon of another component. Below is the ...
I've recently delved into the world of HTML/CSS and I'm working on creating a simple website. However, I'm encountering some white space-related issues above the header/body and around the sides. Despite trying various adjustments with margi ...
In my Search.js file, I have a container for styling the text box that will be displayed in my Home.js file. import React from 'react'; import './Search.css'; import SearchIcon from '@material-ui/icons/Search'; import MicI ...
Trying to figure out the best way to handle this situation - I need to call a static image from an API server that requires height and width parameters for generating the image size. My website is CSS dynamic, adapting to different screen sizes including ...
I am new to HTML and CSS I'm working on creating a modal content similar to this: https://ibb.co/RvrhmRs Most of the work is done, but my modal currently looks like this: https://ibb.co/1zG0y2t I just need help arranging an icon next to the text. ...
I am currently working on a project that involves clicking on a thumbnail to enlarge the image and display its name (alt) below it. I have made progress, but there seems to be an issue where only one image is displayed no matter which thumbnail I click on. ...
One issue I'm experiencing is that the forms on my site are generated using shortcodes. I have a suspicion that the buttons I created, which lead to submission form1 and then form2, may not be working properly because of this. This is the current set ...