I've been working on my portfolio using next.js and tailwind CSS. I've added scroll-behavior: smooth in the globals.css file, and in the Navbar, I used https://i.stack.imgur.com/wqb4t.png
I really want to achieve that smooth scrolling effect throughout my entire page navigation.
The issue you're facing is related to how <Link> works in Next.js.
By default, when using <Link>, it will scroll to the top of the page before navigating. This behavior is explained in the Link Documentation, and it's intended to ensure that users start from a consistent position when moving between pages. However, in your case, where you want to stay on the same page, this behavior needs to be overridden.
You can prevent this default behavior by adding scroll={false} to your <Link> component. This should resolve the scrolling issue, but there may be additional considerations depending on how you've implemented smooth scrolling and other aspects of Next.js. (Nevertheless, addressing this initial problem should help)
To implement this change, your code snippet should look like this:
<Link href="#link" scroll={false}>In addition, consider utilizing the _document.js file provided by Next.js to manipulate properties of the body and html elements.
Based on your example, here's a suggested approach:
import { Html, Head, Main, NextScript } from 'next/document'
export default function Document() {
return (
<Html className="scroll-smooth">
<Head />
<body className="bg-[#ecf0f3] text-[#1f2937] tracking-wide ">
<Main />
<NextScript />
</body>
</Html>
)
}
This approach allows for a cleaner CSS setup and ensures that the desired behavior is consistently applied to every page rendered in Next.js (as _document.js serves as the "template").
It's also recommended to remove the unnecessary "/" before the #id in your href attribute.
Additional Resources:
It seems that NextJS allows for the use of scroll='false' within the Link tag. As shown in your code snippet below,
<Link scroll={false} href='/#about'> </Link>
Is there a way for the Army class to automatically update its CP property with the sum of CP values from all Detachments in the Detachment class? In the Army class, the CP property should reflect the total CP value from all Detachments and be accessible t ...
The code snippet can be found here I am a beginner in this field and currently studying a piece of code. I am having trouble understanding the logForm.$invalid.$setValidity line. I have searched online but couldn't find any information about it. The ...
Help! I'm struggling with a React issue and need some assistance. I've searched through various posts but haven't found a solution yet, so I'm turning to you for help. I am working with simple React on a webpack-dev-server, and when tr ...
I am currently working on creating a straightforward function that will replace an attribute when called using onclick="changeYoutube('XXXXXX');" within a link tag. However, I am encountering an issue where it says calling "changeYoutube" is resu ...
I recently added the styled-components library to my project and decided to test it out. However, when I attempted this basic example: import React from 'react' import styled from 'styled-components' const Div = styled.div`background ...
Trying to gain a better understanding of how SWR works with NextJS. I've thoroughly looked over the example provided in the SWR - Next.JS SSG and SSR tab, but I'm still unclear on how to fetch data from an external API: What's the reason be ...
I am attempting to access data from another page using session storage. On my initial page, named home.html function go_to_faq(qnum){ window.open('FAQ.html', '_blank'); sessionStorage.setItem('key2', qnum); } <a s ...
Having issues with IE compatibility mode while opening my HTML file on desktop. In IE8, unable to switch it to compatibility mode as the icon seems to disappear in local HTML documents. Any insights on this? LATEST UPDATE: Tried three solutions but still ...
I have put together a small StackBlitz project to showcase my current situation. My aim is to log all objects that fall within a specified date range. However, when I attempt to filter my objects, I am faced with an empty array as the result. I would like ...
I am looking to implement a redirect function in Next.js that will direct users from old paths to new paths with a 301 status code. In my configuration file, I have the following setup: module.exports = (phase, { defaultConfig }) => { const config = w ...
Although I am familiar with the method .getAttribute("innerHTML") for retrieving the value of a h1 tag, my HTML structure is a bit different: https://i.sstatic.net/RVaMM.png While I am able to locate the h1 tag, I am facing difficulty in accessing its inn ...
Experimenting with servlet calls through Ajax functionality using a simple program. A form consisting of a text box and a div with some text. The program takes input from the user, replaces the text inside the div tag. The form looks like this: <form& ...
Lately, I've been pondering on a question. A few years ago, I created a website using regular CSS and now I want to make some changes to the font sizes. While I know that CSS variables are the recommended solution for this situation, I'm curious ...
Is it possible for my website to have an iframe that enables users to browse the web, and when they click on a download button on any external website, the file can be saved directly to a specific folder on my server instead of their own computer? I'm ...
After following the Karate Doc and pasting the Junit HTML Report into my browser, I was surprised to see that the output was in plain text and did not look anything like what was described in the tutorial video. I attempted to view it on both Firefox 57.0. ...
I am currently in the process of deploying a project on Ubuntu Server 22.04. The tech stack I am using is Next.js + Nest.js. I have come across an issue where my Fetch API behaves differently - on my localhost (macOS) everything works smoothly and I rece ...
I'm having issues with creating a fixed header for my webpage. It seems to be hiding behind the rest of the content on the screen even though I have tried adjusting the z-index without success. Here is a snippet of my HTML code: body { m ...
I am developing a form with two input fields and their respective submit buttons. I want users to be able to enter text into either field, hit the Enter key, and have it trigger the same action as clicking the submit button. Currently, pressing Enter after ...
My firebase component is successfully retrieving the data I need, which is a boolean value indicating whether the user is an admin or a regular user. However, I am facing a challenge in passing this boolean value to the Login component where it is required ...
I am facing an issue where I want to extract all the text content from an HTML page that is saved locally on my computer. Currently, I have been successful in extracting all the information present on the page, but it's also including HTML tags and Ja ...