Jump to content
  • 0

переход на якорь заезжает за верхний фиксированный блок.


audisport
 Share

Question

Добрый день!

Уже двое суток голову ломаю, как сделать так, чтобы при нажатии на якорь блок не заезжал за фиксированное меню сверху?

Сайт на котором это творится: https://smart-remont.com/

Помогите, пожалуйста.

Link to comment
Share on other sites

12 answers to this question

Recommended Posts

  • 0

Сделайте якорь невидимым и установите его повыше (на размер меню).

   то есть вы предлагаете сделать еще по одному невидимому блоку для каждого уже имеющегося на сайте, которые будут выше чем видимые?

   Спасибо, за предложение.

 

Может у кого-то есть еще мысли?

Edited by audisport
Link to comment
Share on other sites

  • 0

Так там и так скролл на js сделан. Если не ошибаюсь, то тут https://smart-remont.com/sites/all/modules/scroll_to_destination_anchors/scroll_to_destination_anchors.js?nqtc4s

Просто вычтите высоту меню из linkOffset.

Большое спасибо, а подскажите, пожалуйста, куда в код вставить заветные пиксели?

В js я пока что ноль...

(function($) {Drupal.behaviors.scrolltoanchors = {  attach: function(context, settings) {    $(document).ready(function(){      function validateSelector(a) {        return /^#[a-z]{1}[a-z0-9_-]*$/i.test(a);      }      function scrollToDestination(a, {        if (a >  {          destination = b;        } else {          destination = a;        }        $('html,body').animate({ scrollTop: destination }, 800, 'swing');      }      $('a[href^="#"]', context).click(function(event) {        event.preventDefault();        var hrefValue = $(this).attr('href');        var strippedHref = hrefValue.replace('#','');        var heightDifference = $(document).height() - $(window).height();        if (validateSelector(hrefValue)) {          if ($(hrefValue).length > 0) {            var linkOffset = $(this.hash).offset().top;            scrollToDestination(linkOffset, heightDifference);          }          else if ($('a[name=' + strippedHref + ']').length > 0) {            var linkOffset = $('a[name=' + strippedHref + ']').offset().top;            scrollToDestination(linkOffset, heightDifference);          }        }      });    });  }};}(jQuery));
Edited by audisport
Link to comment
Share on other sites

  • 0

 

куда в код вставить заветные пиксели

Открываем код в редакторе, жмём Ctrl+F, ищем "linkOffset", как было написано ранее; найдя, пишем "- X", где X - число пикселей.

 

Простите, там 4 раза указан linkOffset. Я понял, что к нему надо дописать, но в каком виде и в каких из 4-х мест, что бы браузр это правильно слопал?

Спасибо.

          if ($(hrefValue).length > 0) {            var linkOffset = $(this.hash).offset().top;            scrollToDestination(linkOffset, heightDifference);          }          else if ($('a[name=' + strippedHref + ']').length > 0) {            var linkOffset = $('a[name=' + strippedHref + ']').offset().top;            scrollToDestination(linkOffset, heightDifference);
Edited by audisport
Link to comment
Share on other sites

  • 0

возник еще один интересный вопрос, а как вместо цифирек пикселей указать там код который будет брать значение высоты из верхнего фиксированного меню?

Спрашиваю потому что в зависимости от разрешения экрана размеры верхнего меню будут изменятся. 

Спасибо.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

  • Similar Content

    • By blackrusjew
      Добрый
      Имеем одностраничник с несколькими якорями вида https://www.site.ru/#awards
      Возможно ли через htaccess и 301редирект привести их к виду https://www.site.ru/#awards/
      Спасибо)
       
    • By lordenas
      Возникла проблема. На странице реализован обычный якорь типа
      <a name="top"></a> //// <a href="#top">NEXT</a> Но при вставке этой страницы, на другом сайте через iframe якоря перестают работать...
      Возможно ли как-то решить проблему?
    • By AndSan
      <h1 id="iak">Это моя первая страница</h1>
               <ul>
                   <li>
                       <a href="#iak">Привет мой друг!</a>
                   </li>
               </ul>
      Эти команды если их можно так назвать должны были перебрасывать на заголовок другого участка страницы, но сыллка не хочет работать хотя изображена как сыллка. Проверял в css id работает. Можете помочь?
    • By yura777
      Думаю, что вопрос и ответ имеет место быть, актуален и пригодиться не только мне. Вопрос к знающим людям, так как уровень пока не тот: подскажите пожалуйста как сделать автозапуск формы заказа для клиентов на лендинге через заданное время, либо перенаправление посетителя на определенное место?
      Пробовал посредством якоря и мета-тега сделать так:
      <meta http-equiv="refresh" content="5; URL=http://www.мойсайт.ru/#якорь"> но безуспешно. В адресной строке браузера после очередной перезагрузки прописывается путь к якорю, но ничего не происходит. Заранее спасибо откликнувшимся!
    • By wry
      Всем привет. Второй день пытаюсь решить следующую задачу: на главной странице сайта есть ссылка якорь, при клике на которую, страница плавно скролится к нужному блоку. Как сделать, чтобы ссылка на этот блок срабатывала с внешних страниц?
      Подробнее.
      Что имеем:
      меню с одной ссылкой-якорем
      <nav> <ul class="menu"> <li><a href="#scroll">Главная</a></li> <li><a href="link1.html">Внутренняя 1</a></li> <li><a href="link2.html">Внутренняя 2</a></li> </ul> </nav> вызывается через инклуд
      <?php include('system/menu.php') ?> Находясь на странице site.ru, при клике по "Главная" страница плавно скролится вниз  к блоку id="scroll" с помощью этого скрипта
      $(document).ready(function(){ $('a[href*=#]').bind("click", function(e){ var anchor = $(this); $('html, body').stop().animate({ scrollTop: $(anchor.attr('href')).offset().top-100 }, 1000); e.preventDefault(); }); return false; }); При попытке перейти с внутренней страницы сайта к нужному блоку на главной, ничего не происходит. Попробовал изменить ссылку на http://site.ru#scroll. теперь переход с внешних ссылок работает, но не работает скролл на главной. Как сделать, чтобы ссылка корректно срабатывала в обоих вариантах? Подозреваю нужно что-то исправить в коде js, но с этим языком я не знаком.
      Заранее благодарю за помощь.
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy