Плавный переход

Тема в разделе "Верстка", создана пользователем artefakt777, 11 ноя 2013.

Информация :
Уважаемые пользователи, прежде чем ответить в теме или создать новую, внимательно ознакомьтесь с Правилами раздела и Правилами форума
Для быстрого поиска ответов на ваши вопросы воспользуйтесь Картой раздела и/или Поиском по разделу
Модераторы: ultra
  1. artefakt777

    artefakt777

    Регистр.:
    15 июл 2012
    Сообщения:
    455
    Симпатии:
    119
    Внизу страницы заякорен текст, а ссылка на этот якорь вверху страницы. Если нажать на ссылку, то мгновенно попадаешь к тексту.

    Как сделать, что бы при нажатии на ссылку страница плавно прокручивалась до места якорения?
     
    avtorit1949 нравится это.
  2. Solus_Rex

    Solus_Rex

    Регистр.:
    15 янв 2012
    Сообщения:
    425
    Симпатии:
    179
    Последнее редактирование: 11 ноя 2013
    artefakt777 нравится это.
  3. artefakt777

    artefakt777

    Регистр.:
    15 июл 2012
    Сообщения:
    455
    Симпатии:
    119
    Здесь в ссылке нужно прописывать дополнительные параметры. Мне нужно сделать ссылку от Jooml'овского меню, а там нельзя их указывать. Есть еще решения?
     
    avtorit1949 нравится это.
  4. Solus_Rex

    Solus_Rex

    Регистр.:
    15 янв 2012
    Сообщения:
    425
    Симпатии:
    179
    В сохранённых записях есть ещё такой вариант:
    Летом рылся. Искал scroll to div.
    HTML:
    <html>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
    <script>
    $(document).ready(function (){
    $("#click").click(function (){
    //$(this).animate(function(){
    $('html, body').animate({
    scrollTop: $("#div1").offset().top
    }, 2000);
    //});
    });
    });
    </script>
    <div id="div1" style="height: 1000px; width 100px">
    test
    </div>
    <br/>
    <div id="div2" style="height: 1000px; width 100px">
    test 2
    </div>
    <button id="click">нажми меня!</button>
    </html>
    Вот в работе:
    http://codepen.io/Solus_Rex/pen/uIabj

    И ещё, вот тут были примеры, я когда разбирался смотрел:
    http://likbezz.ru/forum/71-666-1
     
    Последнее редактирование: 11 ноя 2013
  5. xoxmo

    xoxmo Постоялец

    Регистр.:
    24 мар 2008
    Сообщения:
    142
    Симпатии:
    86
    небольшой код на jquery для ваших нужд. добавляется после самого файла jquery.
    работает с любыми ссылками на якоря на текущей странице. нет надобности добавлять какие-то классы, id или дополнительные параметры.

    HTML:
    $(function() {
      $('a[href*=#]:not([href=#])').click(function() {
        if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
          var target = $(this.hash);
          target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
          if (target.length) {
            $('html,body').animate({
              scrollTop: target.offset().top
            }, 1000);
            return false;
          }
        }
      });
    });
     
    Последнее редактирование: 11 ноя 2013
    01K и artefakt777 нравится это.
  6. artefakt777

    artefakt777

    Регистр.:
    15 июл 2012
    Сообщения:
    455
    Симпатии:
    119
    Разобрался, вставил следующий код в index.php шаблона.
    Код:
    <script type="text/javascript">
    (function() {
      $('a[href*=#]:not([href=#])').click(function() {
        if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
          var target = $(this.hash);
          target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
          if (target.length) {
            $('html,body').animate({
              scrollTop: target.offset().top
            }, 1000);
            return false;
          }
        }
      });
    });
    </script>
    Вопрос в том, как изменить скорость прокрутки на более медленную?
     
    avtorit1949 и runyugin нравится это.
  7. PiaHurricane

    PiaHurricane Писатель

    Регистр.:
    22 ноя 2013
    Сообщения:
    3
    Симпатии:
    0
    1000 в скрипте - это длительность анимации в миллисекундах. Т.е. 1 секунда. Поменяйте на большее значение.
     
  8. Davlet

    Davlet Создатель

    Регистр.:
    6 май 2013
    Сообщения:
    22
    Симпатии:
    0
    Кстати скорость указана линейно) Т.е. при высоте страницы в 1000рх анимация будет длиться 1сек и на странице в 5000рх тоже 1сек. В итоге скорость разная)
    Советую привязаться к расстоянию между якорем и ссылкой, тогда скорость всегда будет одинаковой.
     
  9. SerNeo

    SerNeo Создатель

    Регистр.:
    10 ноя 2008
    Сообщения:
    69
    Симпатии:
    3
    я использую данный скрипт:

    Код:
    // Smooth Scroling of ID anchors  
      function filterPath(string) {
      return string
        .replace(/^\//,'')
        .replace(/(index|default).[a-zA-Z]{3,4}$/,'')
        .replace(/\/$/,'');
      }
      var locationPath = filterPath(location.pathname);
      var scrollElem = scrollableElement('html', 'body');
      $('a[href*=#].anchor').each(function() {
        $(this).click(function(event) {
        var thisPath = filterPath(this.pathname) || locationPath;
        if (  locationPath == thisPath
        && (location.hostname == this.hostname || !this.hostname)
        && this.hash.replace(/#/,'') ) {
          var $target = $(this.hash), target = this.hash;
          if (target && $target.length != 0) {
            var targetOffset = $target.offset().top;
              event.preventDefault();
              $(scrollElem).animate({scrollTop: targetOffset}, 400, function() {
                location.hash = target;
              });
          }
        }
      });  
      });
      // use the first element that is "scrollable"
      function scrollableElement(els) {
        for (var i = 0, argLength = arguments.length; i <argLength; i++) {
          var el = arguments[i],
              $scrollElement = $(el);
          if ($scrollElement.scrollTop()> 0) {
            return el;
          } else {
            $scrollElement.scrollTop(1);
            var isScrollable = $scrollElement.scrollTop()> 0;
            $scrollElement.scrollTop(0);
            if (isScrollable) {
              return el;
            }
          }
        }
        return [];
      }
    вставляешь в *.js фаил и потом в любом месте пишешь что то вроде <a href="#section-2">Перейти туда</a> и плавно перейдет на якорь с ID section-2
     
  10. alexpnet

    alexpnet Писатель

    Регистр.:
    7 янв 2014
    Сообщения:
    3
    Симпатии:
    0
    если еще актуально, кидаю скриптик, использую его на всех своих лендингах,

    Код:
    <script type="text/javascript">
    $(document).ready(function ()
    {
      $("a").click(function () {
      var elementClick = $(this).attr("href");
      var destination = $(elementClick).offset().top;
      if ($.browser.chrome) {
      $('body').animate({ scrollTop: destination }, 1100); //1100 - скорость прокрутки
      } else {
      $('html').animate({ scrollTop: destination }, 1100);
      }
      });
    });
    </script>
    ссылка которау перенаправляет
    <a href="#topDiv">НАВЕРХ</a>

    ну и соотетствеено куда перейдете при клике
    <TABLE id="topDiv" ...