Настройте привязку к другим страницам с фиксированным меню - PullRequest
Новая
       1

Настройте привязку к другим страницам с фиксированным меню

0 голосов
/ 07 октября 2019

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

Я попытался решить эту проблему, используя метод анимации JavaScript и добавив значение высоты меню. Это хорошо работает, когда идентификатор судьбы привязки находится на той же странице. Но в моем случае это не работает, потому что я хочу перейти к идентификатору на другой странице сайта.

Мой HTML : 

<a href="http://localhost/meu_site/psicologia#psicoterapia" class="psi-block-item"></a>

Мой JavaScript : 

<script src="http://localhost/meu_site/js/jquery-3.4.1.min.js"></script>

$('.psi-block-item').click(function() {
    var target = $(this).attr("href")
    $("html, body").animate({ scrollTop: $(target).offset().top-100 }, 100)
})

Видимо, при переходе с домашней страницына другой странице кажется, что я игнорирую мою последнюю команду js и просто следую за href, сохраняя часть содержимого за фиксированным меню.

Я уже видел некоторых людей, предлагающих использовать элементы псевдо-css и скрывающих их для созданияэто работает, но я искал чистое и более профессиональное решение, используя только html и javascript.

Спасибо.

Ответы [ 2 ]

0 голосов
/ 07 октября 2019 
$(document).load(function() {
    var target = this.location.href;
    $("html, body").animate({ scrollTop: $(target).offset().top-100 }, 100);
})

Я не уверен, но это должно быть логика, чтобы решить это ...

0 голосов
/ 07 октября 2019

Скорее всего, страница перезагружается, прежде чем она сможет выполнить код. Поэтому я бы посоветовал вам включить прослушиватель события onload окна для каждой страницы, которая ищет хэш и затем выполняет анимацию.

РЕДАКТИРОВАТЬ: Пожалуйста, посмотрите ответ@ nengak-dakup. Его ответ выглядит довольно хорошо. Реализация будет выглядеть следующим образом.

index.html 

<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Home</title>
</head>
<body>
    <header>
        <a href="page1.html#anchor1">Link to Page1 - Anchor 1</a>
        <a href="page1.html#anchor2">Link to Page1 - Anchor 2</a>
        <a href="page1.html#anchor3">Link to Page1 - Anchor 3</a>
    </header>
</body>

и page1.html 

<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Page1</title>
    <style type="text/css">
        header {
            position: fixed;
            top: 0px;
            left: 0px;
            width: 100%;
            height: 100px;
            background-color: grey;
            z-index: 5;
        }
        .box {
            position: relative;
            top: 100px;
            width: 100%;
            height: 800px;
        }
    </style>
    <script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
    <script type="text/javascript">
        $(document).load(function() {
            var target = this.location.href;
            $("html, body").animate({ scrollTop: $(target).offset().top-100 }, 100);
        })
    </script>
</head>
<body>
    <header>
        <a href="index.html">Back</a>
    </header>
    <div id="anchor1" class="box" style="background-color: blue"></div>
    <div id="anchor2" class="box" style="background-color: green"></div>
    <div id="anchor3" class="box" style="background-color: red"></div>
</body>

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...