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

artefakt777

artefakt777

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

Как сделать, что бы при нажатии на ссылку страница плавно прокручивалась до места якорения?
 
Последнее редактирование:
Здесь в ссылке нужно прописывать дополнительные параметры. Мне нужно сделать ссылку от Jooml'овского меню, а там нельзя их указывать. Есть еще решения?
 
artefakt777 написал(а):
Здесь в ссылке нужно прописывать дополнительные параметры. Мне нужно сделать ссылку от Jooml'овского меню, а там нельзя их указывать. Есть еще решения?
Нажмите для раскрытия...
В сохранённых записях есть ещё такой вариант:
Летом рылся. Искал 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>

Вот в работе:
Для просмотра ссылки Войди или Зарегистрируйся

И ещё, вот тут были примеры, я когда разбирался смотрел:
Для просмотра ссылки Войди или Зарегистрируйся
 
Последнее редактирование:
небольшой код на 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;
      }
    }
  });
});
 
Последнее редактирование:
Разобрался, вставил следующий код в 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>
Вопрос в том, как изменить скорость прокрутки на более медленную?
 
1000 в скрипте - это длительность анимации в миллисекундах. Т.е. 1 секунда. Поменяйте на большее значение.
 
Кстати скорость указана линейно) Т.е. при высоте страницы в 1000рх анимация будет длиться 1сек и на странице в 5000рх тоже 1сек. В итоге скорость разная)
Советую привязаться к расстоянию между якорем и ссылкой, тогда скорость всегда будет одинаковой.
 
я использую данный скрипт:

Код: 
// 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
 
если еще актуально, кидаю скриптик, использую его на всех своих лендингах,

Код: 
<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" ...
 
Войдите или зарегистрируйтесь для ответа.
Назад
Сверху