javascript - 导航栏连接到链接标签？

Question

当页面加载时，我的导航栏连接到页面顶部的我的链接标签。

这就是我的意思：https ://prnt.sc/10vqn5e

它连接到顶部的字母：https ://prnt.sc/10vqncw

我的代码：

animelist.js (the file that makes the letters)

import React from 'react'
import { HashLink as Link } from 'react-router-hash-link'

import './animelist.scss'

const animelist = () => (
  <div>
    <div className="sectionListLink">
      <Link to="#sectionA" className="sectionALink">A</Link>
      <Link to="#sectionB" className="sectionBLink">B</Link>
      <Link to="#sectionC" className="sectionCLink">C</Link>
      <Link to="#sectionD" className="sectionDLink">D</Link>
      <Link to="#sectionE" className="sectionELink">E</Link>
      <Link to="#sectionF" className="sectionFLink">F</Link>
      <Link to="#sectionG" className="sectionGLink">G</Link>
      <Link to="#sectionH" className="sectionHLink">H</Link>
      <Link to="#sectionI" className="sectionILink">I</Link>
      <Link to="#sectionJ" className="sectionJLink">J</Link>
      <Link to="#sectionK" className="sectionKLink">K</Link>
      <Link to="#sectionL" className="sectionLLink">L</Link>
      <Link to="#sectionM" className="sectionMLink">M</Link>
      <Link to="#sectionN" className="sectionNLink">N</Link>
      <Link to="#sectionO" className="sectionOLink">O</Link>
      <Link to="#sectionP" className="sectionPLink">P</Link>
      <Link to="#sectionQ" className="sectionQLink">Q</Link>
      <Link to="#sectionR" className="sectionRLink">R</Link>
      <Link to="#sectionS" className="sectionSLink">S</Link>
      <Link to="#sectionT" className="sectionTLink">T</Link>
      <Link to="#sectionU" className="sectionULink">U</Link>
      <Link to="#sectionV" className="sectionVLink">V</Link>
      <Link to="#sectionW" className="sectionWLink">W</Link>
      <Link to="#sectionX" className="sectionXLink">X</Link>
      <Link to="#sectionY" className="sectionYLink">Y</Link>
      <Link to="#sectionZ" className="sectionZLink">Z</Link>
    </div>
 </div>
)

export default animelist

header.js (the file that has the navbar stuff)

import React, { Fragment } from 'react'
import { Navbar, Nav } from 'react-bootstrap'

import './Header.scss'

const alwaysOptions = (
  <Fragment>
    <Nav.Link href="#/" className="btn btn-light">Home</Nav.Link>
    <Nav.Link href="#/Anime-list" className="btn btn-warning">Anime List</Nav.Link>
    <Nav.Link href="https://notReal.com" target='_blank' rel="noopener noreferrer" className="btn btn-danger">Cartoons</Nav.Link>
  </Fragment>
)

const Header = ({ user }) => (
  <Navbar bg="dark" expand="md" id="navbar">
    <Navbar.Brand href="#">
      <h3 className="navbarTitle">Anime Stream</h3>
    </Navbar.Brand>
    <Navbar.Toggle aria-controls="basic-navbar-nav" />
    <Navbar.Collapse id="basic-navbar-nav">
      <Nav className="ml-auto">
        { alwaysOptions }
      </Nav>
    </Navbar.Collapse>
  </Navbar>
)

window.onscroll = function () { scrollFunction() }

const scrollFunction = () => {
  if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
    document.getElementById('navbar').style.top = '0'
  } else {
    document.getElementById('navbar').style.top = '0'
  }
}

export default Header

只有在我向下滚动页面加载后它才会这样做，它就像一个常规的粘性导航栏。我不知道为什么会这样，也许是因为我创建粘性导航栏的方式？我什至尝试过不使用 hashLink 而只使用 Link 但在页面加载时它仍然会粘在字母上。

标签： javascriptreactjs