Проблемы с плавной прокруткой при загрузке страницы и скачке смещения, когда ID и хэш установлены одинаково - PullRequest
0 голосов
/ 13 апреля 2011

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

Контекст: Wordpress-сайт, с субнав навигацией, установленной на / 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
    && (location.hostname == this.hostname || !this.hostname)
    && 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, и для меня нет джиттера, я установил хэшчтобы отличаться от идентификатора, чего я совсем не хочу ...

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

&

location.hash = target+"-section"

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

1 Ответ

1 голос
/ 13 апреля 2011

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

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

Это похоже на обновленную ссылку на SmoothScroll от MooTools. ScrollTo это именно то, что вам нужно.

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