如何解决在同一链接上单击两次时,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 举报,一经查实,本站将立刻删除。