MDBNavLink scroll to section


Topic: MDBNavLink scroll to section

gllermaly asked 6 years ago

Hello, I'm using the Landing Page example and I want top navigation links to scroll down (smoothly) to the correct section.

Example:

<MDBNavItem>

<MDBNavLinkto="#features">Features</MDBNavLink>

</MDBNavItem>


....

      <section

className="section my-5wow fadeIn"

data-wow-delay="0.3s"

id="features"

>
When I click the link nothing happens, please help :) 

If I put a regular href inside NavItem works but not smoothly and CSS messes up :(

gllermaly answered 6 years ago

Solved with this library for smoothness :

https://github.com/mauricevancooten/react-anchor-link-smooth-scroll

And this code : 


<MDBNavItem>

<AnchorLink

offset="100"

href="#features"

style={{ color:"white" }}

className="pl-3"

>

Features

</AnchorLink>

</MDBNavItem>
 
if you know a cleaner way let me know

Anna Morawska staff commented 6 years ago

Hi there,

thank you for sharing your implementation with us. 


sg-dev commented 5 years ago

Just wanted to say thank you, saved my bacon.


Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue
  • User: Free
  • Premium support: No
  • Technology: MDB React
  • MDB Version: 4.7.1
  • Device: PC
  • Browser: Chrome
  • OS: Ubuntu 16
  • Provided sample code: Yes
  • Provided link: No
Tags