Блог

Когда сайт загружается, страница начинается с тела, и мне нужно прокрутить вверх, чтобы увидеть заголовок в стиле.

(Но эта проблема появляется не во всех браузерах)

Я хочу начать прокрутку с заголовка.

Вот живой сайт: http://pavlorishko228-001-site1.btempurl.com /

Код:

 import React from "react";
import { Link } from 'react-router-dom';
import styled from "styled-components";
import ScrollHandler from "../../components/ScrollHandler";
import Logo from '../../public/SmokeyWayLogo.svg';

const StyledLogo = styled("img")<{isScrolled: boolean}>`
  filter: ${props => props.isScrolled ? "invert(1)" : "drop-shadow(2px 4px 3px black)"};
  height: 80px;
  padding-left: 0;
  float: left;
`;

const StyledLink = styled("div")<{isScrolled: boolean}>`
  padding: 20px;
  margin: 10px;
  display: inline-block;
  border-radius: 5px;
  amp;:hover {
    box-shadow: 0px 0px 15px 2px  ${props => props.isScrolled ? "white" : "black"};
    color: black;
  }
  a {
    text-decoration: inherit;
    color: ${props => props.isScrolled ? "white" : "black"};
  }
`;

const StyledNav = styled("div")<{isScrolled: boolean}>`
  position: fixed;
  width: 100%;
  background-color: ${props => props.isScrolled ? "transparent " : "white"};
`;
  
function Header(){
  const _isScrolled = ScrollHandler();

    return(
        <header>
            <StyledNav isScrolled={_isScrolled}>
                <StyledLogo isScrolled={_isScrolled} src={Logo}></StyledLogo>
                <StyledLink isScrolled={_isScrolled}>
                    <Link to="./">Smokey Way</Link>
                </StyledLink>
                <StyledLink isScrolled={_isScrolled}>
                    <Link to="./">Головна</Link>
                </StyledLink>
                <StyledLink isScrolled={_isScrolled}>
                    <Link to="./">Меню</Link>
                </StyledLink>
            </StyledNav>
        </header>
    )
}
export default Header;
  

Я использовал chrome на своем устройстве, и все было в порядке, я имею в виду, что я увидел ваш заголовок после загрузки страницы. Ваша проблема ненормальна, и для меня это странно, но я предлагаю вам JS (в этом коде перед загрузкой страницы вы должны быть уверены, что вы находитесь в верхней части текущей страницы) и дайте мне обратную связь:

 $(window).on('beforeunload', function(){
  $(window).scrollTop(0);
});