Блог

ОБНОВЛЕНИЕ: Точно так же: но в jQuery… Возможно, мне стоит просто потратить некоторое время на его перенос. http://davidwalsh.name/mootools-onload-smoothscroll

Контекст: сайт WordPress, для навигации по subnav установлен параметр /page / #idname для прокрутки страницы вниз.

Мне трудно понять, как заставить страницу прокручиваться до идентификатора (со смещением) и устанавливать местоположение без перехода. И если вы загружаете страницу с хэшем, как я могу заставить страницу прокручиваться сверху вниз?

 //SMOOTH SCROLL
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*=#]').each(function() {
    var thisPath = filterPath(this.pathname) || locationPath;
    if (  locationPath == thisPath
    amp;amp; (location.hostname == this.hostname || !this.hostname)
    amp;amp; this.hash.replace(/#/,'') ) {
      var $target = $(this.hash), target = this.hash;
      if (target) {
        var targetOffset = $target.position().top - 60;
        $(this).click(function(event) {
          event.preventDefault();
          $(scrollElem).animate({scrollTop: targetOffset}, 400, function() {
            location.hash = target "-section"
          });
        });
      }
    }
  });

  // 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 [];
  }
  

Обратите внимание на смещение -60, и чтобы у меня не было дрожания, я установил хэш, отличный от ID, чего я совсем не хочу…

 var targetOffset = $target.position().top - 60;
  

amp;

 location.hash = target "-section"
  

Я бы хотел, чтобы хэш оставался неизменным, но я делаю это, чтобы смещение работало. Любая помощь была бы оценена.

Упростите свою жизнь:http://plugins.jquery.com/project/ScrollTo

У него есть возможность смещения, и вы просто указываете ее на сам элемент.

Это выглядит точно так же, как ваша обновленная ссылка на SmoothScroll от MooTools. scrollTo — это именно то, что вам нужно.