Holiday Notice: Support will be provided on a limited scale from December 24th, 2024, to January 2nd, 2025. Happy holidays and a wonderful New Year!


Topic: MDBNavLink scroll to section

gllermaly free 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 free 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 free 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

  • ForumUser: 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