javascript - NavBar should scroll up again when clicking twice on the same link

Question

@import "../../colors.scss";
@import "../../responsive.scss";

.navbar-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 2rem 4rem;
    position: fixed;
    width: 100%;
    max-width: 100vw;
    top: 0;
    left: 0;
    background-color: $white;
    z-index: 100;
    height: 5rem;
    font-family: Montserrat;
    transition: all 0.3s;


    

    @include responsive(mobile) {
        padding: 0.8rem 2rem;
        height: 5rem;
    }

    &,
    & * {
        box-sizing: border-box;
    }

    .left-side {
        display: flex;
        align-items: center;

        .logo {
            font-family: "Pacifico", cursive;
            font-size: 1.8rem;
            font-weight: 400;
            color: rgba($black-text, 0.8);
            margin-top: -1rem;

            @include responsive(mobile) {
                margin-top: -0.3rem;
            }
        }

        .links {
            @include responsive(desktop-small) {
                display: none;
            }

            margin-left: 4rem;
            display: flex;

            a {
                margin: 0 2rem;

                @include responsive(desktop-small) {
                    margin: 0 1.5rem;
                }

                &:hover {
                    color: $blue;
                }
            }

            .active {
                color: $blue;
            }
        }
    }

    .right-side {
        .auth {
            display: flex;
            align-items: center;

            .logout {
                margin-right: 2rem;
                cursor: pointer;
                color: $blue;

                &:hover {
                    color: $red;
                }
            }
        }

        @include responsive(desktop-small) {
            display: none;
        }
    }

    // ----------mobile-------------------
    .mobile-right-side {
        display: none;

        @include responsive(desktop-small) {
            display: flex;
            align-items: center;
        }

        .background {
            position: absolute;
            transform-origin: top;
            transition: all 0.2s ease-out;
            top: 5rem;
            right: 0;
            background-color: $white;
            display: flex;
            justify-content: center;
            align-items: flex-start;
            width: 100vw;
            height: 100vh;
            border-radius: 0;
        }

    
    

        .opened {
            .background {
                transform: scaleY(1);
                opacity: 1;
            }

            .hamburger {
                div {
                    width: 1.9rem !important;
                }
            }
        }

        .closed {
            .background {
                transform: scaleY(0);
                opacity: 0;
            }
        }

        .nav-dropdown {
            // padding: 1.2rem;
            display: flex;
            flex-direction: column;
            justify-content: space-evenly;
            text-align: center;
            width: 100%;
            align-items: center;
            

            &>* {
                cursor: pointer;
                margin: 0.8rem;
            }

            .active {
                color: $blue;
            }

            .register-btn {
                width: 100%;
                background-color: $blue;
                color: $white;
                padding: 1.5rem;
            }

            .underline {
                width: 100%;
                height: 1px;
                margin-left: auto;
                margin-right: auto;
                border: 1px solid rgba($black, 0.1);
            }
        }

        .hamburger {
            display: flex;
            flex-direction: column;
            align-items: flex-end;
            justify-content: center;
            margin-left: 2rem;
            cursor: pointer;

            @include responsive(mobile) {
                margin-left: 1rem;
            }

            div {
                width: 1.9rem;
                height: 0.15rem;
                background-color: rgba($black, 0.5);
                transition: all 0.1s ease-out;
            }

            &>div:nth-child(2) {
                margin: 0.25rem 0;
            }

            &>div:nth-child(1) {
                width: 1.55rem;
            }

            &>div:nth-child(3) {
                width: 1.3rem;
            }

            &:hover {
                @include responsive(desktop-small) {
                    div {
                        width: 1.9rem;
                    }
                }

                @include responsive(mobile) {
                    &>div:nth-child(1) {
                        width: 1.55rem;
                    }

                    &>div:nth-child(3) {
                        width: 1.3rem;
                    }
                }
            }
        }
    }
}

import React, { useState, Fragment } from "react";
import { NavLink, useHistory } from "react-router-dom";

export default ({ toggleRegister, auth, logout }) => {
    const [showDropDown, toggleDropDown] = useState(false);
    const history = useHistory();

    return (
        <div
            className={`nav-dropdown-wrapper ${showDropDown ? "opened" : "closed"}`}
            onClick={() => toggleDropDown((prev) => !prev)}
        >
            <div className="hamburger">
                <div />
                <div />
                <div />
            </div>
            <div className="background">
                <div className="nav-dropdown">
                    {auth ? (
                        <Fragment>
                            <div
                                className="register-btn"
                                onClick={() => history.push("dashboard")}
                            >
                                Dashboard
                            </div>
                            <div onClick={logout}>Log Out</div>
                        </Fragment>
                    ) : (
                        <Fragment>
                            <div
                                className="register-btn"
                                onClick={() => toggleRegister("register")}
                            >
                                Create Free Account
                            </div>
                            <div onClick={() => toggleRegister("login")}>Sign In</div>
                        </Fragment>
                    )}
                    <div className="underline" />
                    <NavLink to="/features">Features</NavLink>
                    <div className="underline" />

                    <NavLink to="/blogs">Blogs</NavLink>
                    <div className="underline" />
                    <a href="http://guide.drawpi.com">Docs</a>
                    <div className="underline" />
                    <NavLink to="/pricing">Pricing</NavLink>
                    <div className="underline" />
                    <NavLink to="/support">Support</NavLink>
                    <div className="underline" />
                </div>
            </div>
        </div>
    );
};

When I click on the link of my NavBar the page scroll up, but when I'm on the page and click again on the link the page is not scrolling up anymore. for example, if we are on /contact and we click contact again in navbar or footer, then the screen should scroll up. Do I need to use css to do that? I search everywhere on google, but could not find anyway how to do that. Any help would be welcome.

标签： javascriptcssreactjsscrollnavbar