Jquery Smooth Scroll Onclick

Question

В настоящее время я использую скрипт плавной прокрутки из трюков CSS.

Проблема, с которой я столкнулся, заключается в том, что я использовал ссылки как ссылки с ссылками на элементы привязки.

Вы можете увидеть это здесь . Проблема в том, что скрипт не ищет то, что мне нужно, ссылки вверху (div) не найдены скриптом, поэтому не прокручивайте плавно до якоря. Принимая во внимание, что о, услуги, контактные ссылки (текстовые внутри зеленых штук) плавно прокручиваются.

Я полный jquery и javascript noob и не знаю, как изменить скрипт для включения div-ов onclick или сделать скрипт, чтобы он плавно прокручивался до якорей.

Мне нужен сценарий для плавной прокрутки как ссылок div, так и текстовых ссылок, или мне нужен дубликат сценария, который работает с ссылками div (2 сценария, которые выполняют текстовые ссылки и ссылки div - тот, который я использую только для atm, делает текст)

<script>
$(document).ready(function() {
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.offset().top;
    $(this).click(function(event) {
      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 [];
  }

    });
</script>

Answer 1

Вы можете использовать якоря вместо div в nav, сейчас вы делаете

<div id="whatever" onclick="window.location=#portfolio">portfolio</div>

, но это не семантика, и это не работает так, как вы хотите, так что это doubleplusнехорошо.используйте

<a id="whatever" href="#portfolio" style="display:block">portfolio</a>

, тогда код из трюков css должен работать ... если он кликабелен, то, вероятно, это кнопка или якорь.

теги якоря в вашем теле работают как положенокстати ...

Answer 2

Я не знаю, используете ли вы фреймворк javascript, такой как jQuery. Для таких сайтов я всегда использую плагин jQuery «Localscroll». Он всегда отлично работает кросс-браузер.

Вы можете посмотреть документацию по плагину здесь: http://flesler.blogspot.com/2007/10/jquerylocalscroll-10.html

Это очень удобно.

Удачи!