I have built a Portfolio in NextJS and I've enabled smooth scrolling by doing the following inside global.css
html {
scroll-behavior: smooth
}
This somewhat works. As in the 'Home' link on the Navbar works when you are elsewhere, the last Icon on the Home section which takes you to 'Contact' works, the button right at the bottom to take you back to the top also works however my other Navbar items fail to smooth scroll, it just instantly goes to that section.
This is the link for anyone who wants to see for themselves https://danblock.vercel.app/
Relevant Code - Contact (Not working)
<Link href="/#contact">
<li className="ml-10 text-sm uppercase hover:border-b">
Contact
</li>
</Link>
Home - Working
<Link href="/">
<li className="ml-10 text-sm uppercase hover:border-b">Home</li>
</Link>
Scroll to top button (working)
<Link href="/">
<div className="rounded-full shadow-lg shadow-gray-400 p-4
cursor-pointer hover:scale-110 ease-in duration-300">
<HiOutlineChevronDoubleUp className="text-[#FF0000]/80"
size={30} />
</div>
</Link>
It looks as if it's only working for things directing to "/"
It looks like it's within the way NextJS handles <Link? scroll={false} inside the Link Tag, it has fixed the issue.
Reading documents, it seems by default, will go to the top, and then scroll back.
Related
Im trying to set up my page so when you click "candidates" in the NavBar it goes to the Candidates section of the Home page (even if you're on another page). So far, I can only get it to scroll down if you click the Candidates button within the Home page using an tag but when I try to use a tag it doesn't work.
What am I doing wrong?
<nav className="w-full flex py-6 px-0 justify-between items-center navbar bg-red-gradient">
<img src={logo} alt="hoobank" className="w-[124px] h-[32px]" />
<ul className="list-none sm:flex hidden justify-end items-center flex-1 mr-5" >
{navLinks.map((nav, index) => (
<li
key={nav.id}
className={`font-poppins font-normal cursor-pointer text-[16px] mr-8 text-white `}
>
<Link to={nav.id === "home" ? "/" :`#${nav.id}`}>
<a href={`#${nav.id}`} >
{nav.title}
</a>
</Link>
</li>
))}
<Button2 />
</ul>
I've built a component that solves this problem passively in the background without having to modify any react-router Links. Works with React-Router v6.
https://github.com/ncoughlin/scroll-to-hash-element
first of all you didn't post any code. But still i think, i got your answer. Please try to check react router hashlink that will helps to move to particular section of a page.
If you still facing issue just lemme know, i will help you.
Thanks
So, I have this code:
<div className="bg-black font-serif pl-20 grid text-white !scroll-smooth">
<Head>
<title>MinimDays | Ultimate minimalism</title>
<link rel="icon" href="/plant.ico" className="fill-white" />
</Head>
<section id="home">
<div className="flex">
<span className="pt-72 mr-[400px]">
<h1 className="text-3xl ">MinimDays | Ultimate minimalism</h1>
<Link href="#about"><a className="text-lg hover:text-gray-400">About</a></Link> |
<Link href="#contactus"><a className="text-lg hover:text-gray-400"> Contact Us</a></Link>
</span>
<picture>
<img src="/photo.jpg" alt="photo" className="h-[480px] w-[320px] mt-[80px] rounded-xl border-white border-4"/>
</picture>
</div>
</section>
<section id="about" className="mt-20">
<h1 className="text-3xl mb-5">About Us</h1>
<hr className="mb-5"/>
<p className="text-lg">I like the idea of digital minimalism, but apps that satisfy this category are usually paid <br /> or have a free tier which is highly limited, so I said SCREW IT, <br /> and created my own! </p>
</section>
</div>
And the scroll animation does not work. I tried on Firefox Developer Edition and Chrome, but nothing seems to help. Any suggestions?
You need to add smooth-scroll to the html element. So add this to your main css file:
html {
scroll-behavior: smooth;
}
I managed to get smooth scrolling working with your example code with the above change, in an HTML version that I put together.
I haven't tested it in Next.js, but note the <Link /> is for navigation between pages. Not sure if that will cause problems for links within the page.
MDN Smooth Scroll documentation:
When this property is specified on the root element, it applies to the viewport instead. This property specified on the body element will not propagate to the viewport.
https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-behavior
react-scroll make Link, highlight the element scrolled in other section
I want to add a highlight to the element scrolled, I am using react-scroll and I have 2 sections one is for links and the second is the content of the link. The scrolling is working but I want to highlight the content of the link.
in the sections of the links I have:
import { Link, DirectLink, Element, Events, animateScroll as scroll, scrollSpy, scroller } from 'react-scroll'
<Link
className="font-bold text-xs cursor-pointer"
to={`test | 1`}
spy={true}
smooth={true}
duration={500}
containerId="Content"
>
Link1
</Link>
and in the section 2 I have:
<div id="Content">
<div id="test | 1">
test 1111
</div>
</div>
I added activeClass="active" but I do not feel working
I'm trying to do the infamous center operation both vertical and horizontal and have sorta succeeded in doing so.
I'm trying to render a simple react component on my page that will show a 404 message. I want this message to be centered. The way I managed to do this some whitespace is leftover resulting in vertical scroll bars showing up. Ofc I could get rid of them using something like overflow-hidden, but surely there must be a way to center this message perfectly just using a better structure or certain bootstrap classes.
Here is my component:
const NotFoundPage = () => {
return (
<div>
<NavbarComp />
<div className="d-flex align-items-center justify-content-center text-center min-vh-100">
<div>
<h3 className="m-4">
<Badge variant="primary">404</Badge> Page not found...
</h3>
<Link to="/">
<Button variant="secondary">Go to main page</Button>
</Link>
</div>
</div>
</div>
);
};
In the end, I don't care that the scrollbars appear but it bothers me that this positional issue keeps occurring for me in some form or another and I wanna learn to put an end to this :)
You have already figured out how to center your "Not Found" message. What's messing it up for you is the Navbar, which you can test by taking it out. You will notice that the scroll bars disappear.
This class min-vh-100 gives the flex box below the Navbar the height of 100% of the viewport, which avoids adding any scrolls bars. The issue is that Navbar barges in and throw the page off blalance by attaching itself to the top. So the amount of srolling is exactly the height of the Navbar and since it's empty, there is very little scrolling.
An intutitive solution is to put your Navbar INSIDE the flex box. But that won't work in your case, because of how your flex box adjusts items. So I will give you a simpler solution, which should be viewed as more of a work-around.
Bootstrap does not come with classes such as min-vh-95 or min-vh-80, but luckily they are super easy to create. You can add this class to your custom CSS:
.not-found-container {
min-height: 95vh !important;
}
(or you could just stick to the naming convention and name it min-vh-95 for example)
And then change the flex box classes from:
<div className="d-flex align-items-center justify-content-center text-center min-vh-100">
to
<div className="d-flex align-items-center justify-content-center text-center not-found-container">
Here is a Sandbox to illustrate the idea: https://codesandbox.io/s/peaceful-sanne-e3m9w?file=/src/App.js
Obviously the min-height value would need to be adjusted based on the height if your Navbar.
I created a simple navigation menu with Bootstrap. It's working fine in pure javascript, but when adapting it into react, the hamburger icon doesn't function (nothing happens on click). I installed bootstrap with
npm install --save bootstrap
And then added the bootstrap css to index.html in the public folder:
link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB"
My jsx is as follows:
<nav className="navbar navbar-expand-sm navbar-dark bg-dark">
<div className="container">
<button className="navbar-toggler" data-toggle="collapse" data-target="#navbarNav"><span className="navbar-toggler-icon"></span></button>
<div className="collapse navbar-collapse" id="navbarNav">
<ul className="navbar-nav ml-auto">
<li className="nav-item">
<Link to="/app/portfolio" className="nav-link">PORTFOLIO</Link>
</li>
<li className="nav-item">
<Link to="/app/about" className="nav-link">ABOUT</Link>
</li>
<li className="nav-item">
<Link to="#create-head-section" className="nav-link" style={{fontStyle: 'italic'}}>Personal art</Link>
</li>
<li className="nav-item">
<Link to="#share-head-section" className="nav-link">CONTACT</Link>
</li>
</ul>
</div>
</div>
</nav>
Again, everything looks fine except that the hamburger icon is not functioning.
The bootstrap show class is used to display the collapsible menu items. So, the task is to simply add the show class conditionally on click of the hamburger icon.
Just follow these simple steps to achieve this functionality.
Add a showCollapsedMenu(the name is up to you) property with initial value of false in your state like this:
state={
showCollapsedMenu: false
}
Then declare a function like this which when called will reverse the current state:
toggleMenu = () => {
this.setState({
showCollapsedMenu: !this.state.showCollapsedMenu
})
}
The above function will be called whenever the hamburger icon is clicked. So implement the onCLick method on the hamburger icon like this:
<button
className="navbar-toggler"
type="button"
onClick={this.toggleMenu} // <=
data-toggle="collapse"
data-target="#navbarNav">
<span className="navbar-toggler-icon"></span>
</button>
Now create a const show which will conditionally add the show class depending on the state of showCollapsedMenu:
const show = (this.state.showCollapsedMenu) ? "show" : "" ;
Now finally add this show to the div with collapse navbar class like this:
<div className={"collapse navbar-collapse " + show} id="navbarNav">
Note: Mixing jQuery with React is not recommended as they both manipulate the DOM differently. While it may seem an easy solution, it might result in bigger problems.
Bootstrap events require jQuery, Popper and Bootstrap.js source. That page will also let you know which components require JS. You can include jQuery, Popper and bootstrap.js in the index.html file, where you load your bundle. Either add that, or simply check out Reactstrap, which implements Bootstrap components in React.
According to https://www.npmjs.com/package/bootstrap#whats-included, the npm version of Bootstrap doesn't include jQuery, but the navbar component needs it, so you might need to add https://www.npmjs.com/package/jquery to your dependencies.