0

С помощью этой кнопки:

<a href="#buy">Оплатить!</a>

перехожу на определенное место на странице

<a name="buy"></a>

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

нашел такой код:

window.scrollBy(0,-64);

но как его использовать?

P.S. На странице закреплено главное меню (position:fixed;). Т.е. при прокрутке оно всегда остается сверху. И высотой оно 64px.

4 ответа 4

2

Собственно решение

Вся загвоздка была в получении конечной абсолютной высоты. Вот она :)

$element.offset().top - 64

Дублирую на всякий случай тут. Используем jQuery, класс toAnchor и атрибут href как селектор

HTML:

<a href="#anchor" class="toAnchor">ссылка для перехода</a>
<div style="height: 500px;"></div>
<a id="anchor">якорь</a>

JS:

$('.toAnchor').on('click', function () {
  $a = $($(this).attr('href'));
  $('html,body').animate({ scrollTop: $a.offset().top - 64}, 500);
  return false;
});
0

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

0
<!doctype html>
<html>
<head>
    <title>test</title>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
    <script type="text/javascript">
    $(document).ready(function(){
        $('html, body').animate({
            scrollTop: $(window).scrollTop() + 64
        });
    });
    </script>
</head>
<body style="height: 800px;">

</body>
</html>
2
  • Не работает. При нажатии на ссылку попадаю на определенное место на странице (на <a name="buy"></a>). Но скрола страницы нет. Если убрать ссылку на #buy (<a onclick="scrollWin(0,64)">Оплатить</a>) то страница смещается. А мне нужно перейти по ссылке и проскролить страницу одновременно. 28 ноя 2013 в 6:43
  • Покажи код в jsfiddle
    – Kirya
    28 ноя 2013 в 7:56
0

Самый первый блок с якорем (если он в начале страницы) позиционируем паддингом на высоту меню. Для остальных можно создать служебный блок с якорем с абсолютным позиционированием и поднять его на нужное количество пикселей (на высоту меню). Получается очень хорошо без jQuery.

HTML

    <body>
    <nav>
        <ul>
            <li><a href="#home">HOME</a></li>
            <li><a href="#paragraf1">Paragraf1</a></li>
            <li><a href="#paragraf2">Paragraf2</a></li>
        </ul>
    </nav>

    <div class="paragraph" id="home">
        <h1>Home</h1>
    </div>
    <div class="paragraph">
        <div class="anchor" id="paragraf1"></div>
        <h1>Paragraph1</h1>
    </div>
    <div  class="paragraph">
        <div class="anchor" id="paragraf2"></div>
        <h1>Paragraph2</h1>
    </div>
</body>

CSS

* {
  margin: 0;
}
nav {
  height: 64px;
  position: fixed;
  z-index: 100;
  background: yellow;
}
ul {
   list-style-type: none;
   margin: auto;
   line-height: 64px;
   padding: 0 10px;
}
li {
   display: inline-block;
   margin: 0 10px;
}
#home h1 {
   padding-top: 64px;
}
.paragraph {
   height: 300px;
   position: relative;
}
.anchor {
   position: absolute;
   top: -64px;
}

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.