Как я могу использовать смещение JavaScript при ссылках на ссылки в HTML-документе? - PullRequest
Новая
       7

Как я могу использовать смещение JavaScript при ссылках на ссылки в HTML-документе?

3 голосов
/ 10 января 2012

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

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

Я делаю это с помощью кода href: 

<a href="#links"><li>Links</li></a>
<h1><a name="links">Links</a></h1>

Спасибо!

РЕДАКТИРОВАТЬ: Menubar код 

<div id="top-floating-bar"> <!-- Menubar -->
<div class="row">
  <div class="column grid_12">
    <div class="fixed-bar-buttons">
      <ul>
        <a href="#top"><li>Home</li></a>
        <a href="#links"><li>Links</li></a>            
        <a href="#resume"><li>Resume</li></a>
        <a href="#social"><li>Social</li></a>
      </ul>
    </div>
  </div>
</div>
</div> <!-- End the Menubar -->

Ответы [ 3 ]

7 голосов
/ 10 января 2012

Описание

Вы можете использовать функции jQuery .offset() и .scrollTop()

Обновление после обсуждения с tguidon

Я не знаю, как определяется ваш top-floating-bar css, но я знаю, что вы хотите. Размер menubar в скрипке не правильный, потому что я не знаю вашего определения.

Проверьте jSFiddle .

Sample

Html 

<head>
    <script src="jquery-1.5.1.min.js" type="text/javascript"></script>
    <script type="text/javascript"><
          $(function() {
            $(".goto").click(function() {
              var target = $(this).attr("href")
              target = target.substring(1,target.length);
              $(window).scrollTop($('a[name="'+target+'"]').offset().top - 35); 
              return false; 
            });
        });
    </script> 
</head>

<div id="top-floating-bar"> <!-- Menubar -->
<div class="row">
  <div class="column grid_12">
    <div class="fixed-bar-buttons">
      <ul>
        <a href="#top" class="goto"><li>Home</li></a>
        <a href="#links" class="goto"><li>Links</li></a>  
        <a href="#resume" class="goto"><li>Resume</li></a>
        <a href="#social" class="goto"><li>Social</li></a>
      </ul>
    </div>
  </div>
</div>
</div> <!-- End the Menubar -->

<br><br><br><br><br>
<a name="top"/> Top Section
<br><br><br><br><br><br><br><br>

<a name="links"/> Links Section
<br><br><br><br><br><br><br><br>

<a name="resume"/> Resume Section
<br><br><br><br><br><br><br><br>

<a name="social"/> Social Section
<br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br>

Дополнительная информация

3 голосов
/ 10 января 2012

Если ваша строка меню имеет класс menubar, вы можете попробовать что-то вроде этого: 

$('.menubar a').click(function() {

  var y = $('a[name="'+$(this).attr('href').replace('#', '')+'"]').offset().top - 35;
  $(window).scrollTop(y);

  return false;

});
0 голосов
/ 10 января 2012

Если вы хотите получить фантазию, вы можете использовать это http://demos.flesler.com/jquery/scrollTo/ Он имеет встроенную опцию 'offset'.

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

Похожие темы

...