在同一链接上单击两次时，NavBar应该再次向上滚动

问题描述

@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>
    );
};

当我单击NavBar的链接时，页面将向上滚动，但是当我在页面上并再次单击链接时，页面将不再向上滚动。 例如，如果我们位于/ contact上，然后再次在导航栏或页脚中单击“联系人”，则屏幕应向上滚动。我需要使用CSS来做到这一点吗？ 我在Google上到处搜索，但无论如何都找不到该怎么做。任何帮助都将受到欢迎。

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）