[HowTo] Плавный скроллинг для списка брендов без перезагрузки Op / Osa 1.5.x

[ArtemPitov]

Делал по нуждам плавный скроллинг для списка брендов, решил поделиться реализацией 

 

1. заходим в 

catalog\view\theme\*\template\product\manufacturer_list.tpl

2. находим сверху алфавитный указчик

<?php foreach ($categories as $category) { ?>
     
  <a href="index.php?route=product/manufacturer#<?php echo $category['name']; ?>"><b><?php echo $category['name']; ?></b></a>
<?php } ?>

и удаляем index.php?route=product/manufacturer, должно получиться вот так =>

<?php foreach ($categories as $category) { ?>
     
  <a href="#<?php echo $category['name']; ?>"><b><?php echo $category['name']; ?></b></a>
<?php } ?>

3. В конце документа добавляем скрипт 

<script type="text/javascript">
  function scrollHref(){
    var $scroll = $(this);

    $("html, body").animate({
      scrollTop: $($scroll.attr("href")).offset().top}, 2000); 
      return false;
  }
  $("a[href*=#]").click(scrollHref);
</script>

2000 - это время прокрутки в мс

так же к прокрутке можно добавить или отнять px, если у Вас фиксированное меню, к примеру отнимаем или добавляем 100px

scrollTop: $($anchor.attr("href")).offset().top+100}, 2000); 

scrollTop: $($anchor.attr("href")).offset().top-100}, 2000); 

Змінено 16 грудня 2015 користувачем ArtenPitov