Jump to content
Sign in to follow this  
ArtemPitov

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

Recommended Posts

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

 

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); 
Edited by ArtenPitov

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
You are posting as a guest. If you have an account, please sign in.
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Sign in to follow this  

  • Similar Content

    • By mister12
      Описание шаблона "Оборудование для бизнеса - B2B":
      Легкий, стильный, адаптивный шаблон, созданный под тематику "Оборудование для бизнеса" (или как говорят на англ. B2B). Подойдет под любой вид бизнеса. В особенно тем, кто торгует станками, оборудованием, механизмами и прочим. Однако, спектр использования явно не ограничивается этим, вполне удачно вписываются товары электроники, что хорошо видно на демо-шаблоне. В части дизайне его можно вполне назвать универсальным. Преимуществом данного шаблона является максимальная приближенность к логике стандартного шаблона, не требует замены файлов, максимально быстро установится на любой, даже только что установленный Opencart oStore.
      Поддержка версий: Opencart/oStore 1.5.3.x - 1.5.6.x !!!  (версия для 2.X находится тут)
      Не требует продолжительной настройки! Достаточно просто загрузить файлы, выбрать шаблон и указать размер изображений в системе и в модулях.
       

       
      Совместимость/валидация шаблона адаптивный шаблон:
      Шаблон прошел полную оптимизацию кода. Google pagespeed оценивает уровень оптимизации на 98/100. В мобильной версии удобство для пользователей оценено этим же сервисом на 100 из 100 возможных!
      Ссылка на pagespeed - https://developers.google.com/speed/pagespeed/insights/?url=http%3A%2F%2Fopencart.demo1.bget.ru%2Fb2b%2F&tab=desktop
      Шаблон тестировался во всех современных браузерах, проходит проверку валидатора кода без единой ошибки.
      Ссылка на валидатор - https://validator.w3.org/nu/?doc=http%3A%2F%2Fopencart.demo1.bget.ru%2Fb2b%2F
      Корректно отображается на любых мобильных устройствах с любыми размерами экранов. Адаптивная верстка легко проходит проверку от Google Mobile Friendly Websites, благодаря чему исключены потери поискового трафика.
      Ссылка на mobile-friendly - https://search.google.com/test/mobile-friendly?id=c97TwfKJmMtB7V7Vj0jOaA
       

       
      Совместим с ЛЮБЫМИ дополнительными модулями.
      Демо интернет-магазина оборудования:
      Главная страница: http://opencart.demo1.bget.ru/b2b/
      Страница категории: http://opencart.demo1.bget.ru/b2b/desktops/
      Страница товара: http://opencart.demo1.bget.ru/b2b/index.php?route=product/product&path=20&product_id=40
      Демо-админка:
      http://opencart.demo1.bget.ru/b2b/admin/
      Логин: demo
      Пароль: demo
      Шаблон тестировался на Opencart 1.5.6.4, Opencart 1.5.5.1, Opencart 1.5.4.1, Opencart 1.5.3.1, а также на версиях ocStore 1.5.5.1.2, ocStore 1.5.4.1.2, ocStore 1.5.3.1. Если вам требуется шаблон для более ранней версии ocStore и Opencart, то сообщите об этом в теме поддержки шаблона, он будет оперативно добавлен.
       

       
      Лицензия на шаблон магазина оборудования для бизнеса:
      1. В стоимость шаблона также ВКЛЮЧЕНА ПОМОЩЬ по установке и настройке данного шаблона.
      2. Приобретая шаблон вы получаете неограниченный доступ ко всем последующим обновлениям шаблона.
      3. Запрещается передавать файлы шаблона третьим лицам, как на платной, так и на безвозмездной основе, это грубое нарушение авторского права, после чего также следует автоматический бан на форуме.
      4. Покупатель имеет право использовать приобретенный шаблон только для установки на собственный интернет-магазин, либо (если это разработчик) на интернет-магазин клиента.
      5. Шаблон реализуется по принципу "1 покупатель – 1 домен"
      6. Если покупатель будет уличен в нарушении правил описанных выше – он автоматически лишается всякой технической поддержки и подлежит обнародованию.
      Демо шаблона B2B:
      Главная страница: http://opencart.demo1.bget.ru/b2b/
      Страница категории: http://opencart.demo1.bget.ru/b2b/desktops/
      Страница товара: http://opencart.demo1.bget.ru/b2b/index.php?route=product/product&path=20&product_id=40
      Демо-админка:
      http://opencart.demo1.bget.ru/b2b/admin/
      Логин: demo
      Пароль: demo
      Обратите внимание!
      По шаблону B2B планируется дальнейшая доработка и расширение возможностей!
      Обо всех своих предложениях и вопросах обращайтесь в тему поддержки шаблона.
    • By mister12
      499.00 руб
      Скачать/Купить дополнение


      Адаптивный шаблон B2B - Оборудование для бизнеса на Opencart
      Описание шаблона "Оборудование для бизнеса - B2B":
      Легкий, стильный, адаптивный шаблон, созданный под тематику "Оборудование для бизнеса" (или как говорят на англ. B2B). Подойдет под любой вид бизнеса. В особенно тем, кто торгует станками, оборудованием, механизмами и прочим. Однако, спектр использования явно не ограничивается этим, вполне удачно вписываются товары электроники, что хорошо видно на демо-шаблоне. В части дизайне его можно вполне назвать универсальным. Преимуществом данного шаблона является максимальная приближенность к логике стандартного шаблона, не требует замены файлов, максимально быстро установится на любой, даже только что установленный Opencart oStore.
      Поддержка версий: Opencart/oStore 1.5.3.x - 1.5.6.x !!!  (версия для 2.X находится тут)
      Не требует продолжительной настройки! Достаточно просто загрузить файлы, выбрать шаблон и указать размер изображений в системе и в модулях.
       

       
      Совместимость/валидация шаблона адаптивный шаблон:
      Шаблон прошел полную оптимизацию кода. Google pagespeed оценивает уровень оптимизации на 98/100. В мобильной версии удобство для пользователей оценено этим же сервисом на 100 из 100 возможных!
      Ссылка на pagespeed - https://developers.google.com/speed/pagespeed/insights/?url=http%3A%2F%2Fopencart.demo1.bget.ru%2Fb2b%2F&tab=desktop
      Шаблон тестировался во всех современных браузерах, проходит проверку валидатора кода без единой ошибки.
      Ссылка на валидатор - https://validator.w3.org/nu/?doc=http%3A%2F%2Fopencart.demo1.bget.ru%2Fb2b%2F
      Корректно отображается на любых мобильных устройствах с любыми размерами экранов. Адаптивная верстка легко проходит проверку от Google Mobile Friendly Websites, благодаря чему исключены потери поискового трафика.
      Ссылка на mobile-friendly - https://search.google.com/test/mobile-friendly?id=c97TwfKJmMtB7V7Vj0jOaA
       

       
      Совместим с ЛЮБЫМИ дополнительными модулями.
      Демо интернет-магазина оборудования:
      Главная страница: http://opencart.demo1.bget.ru/b2b/
      Страница категории: http://opencart.demo1.bget.ru/b2b/desktops/
      Страница товара: http://opencart.demo1.bget.ru/b2b/index.php?route=product/product&path=20&product_id=40
      Демо-админка:
      http://opencart.demo1.bget.ru/b2b/admin/
      Логин: demo
      Пароль: demo
      Шаблон тестировался на Opencart 1.5.6.4, Opencart 1.5.5.1, Opencart 1.5.4.1, Opencart 1.5.3.1, а также на версиях ocStore 1.5.5.1.2, ocStore 1.5.4.1.2, ocStore 1.5.3.1. Если вам требуется шаблон для более ранней версии ocStore и Opencart, то сообщите об этом в теме поддержки шаблона, он будет оперативно добавлен.
       

       
      Лицензия на шаблон магазина оборудования для бизнеса:
      1. В стоимость шаблона также ВКЛЮЧЕНА ПОМОЩЬ по установке и настройке данного шаблона.
      2. Приобретая шаблон вы получаете неограниченный доступ ко всем последующим обновлениям шаблона.
      3. Запрещается передавать файлы шаблона третьим лицам, как на платной, так и на безвозмездной основе, это грубое нарушение авторского права, после чего также следует автоматический бан на форуме.
      4. Покупатель имеет право использовать приобретенный шаблон только для установки на собственный интернет-магазин, либо (если это разработчик) на интернет-магазин клиента.
      5. Шаблон реализуется по принципу "1 покупатель – 1 домен"
      6. Если покупатель будет уличен в нарушении правил описанных выше – он автоматически лишается всякой технической поддержки и подлежит обнародованию.
      Демо шаблона B2B:
      Главная страница: http://opencart.demo1.bget.ru/b2b/
      Страница категории: http://opencart.demo1.bget.ru/b2b/desktops/
      Страница товара: http://opencart.demo1.bget.ru/b2b/index.php?route=product/product&path=20&product_id=40
      Демо-админка:
      http://opencart.demo1.bget.ru/b2b/admin/
      Логин: demo
      Пароль: demo
      Обратите внимание!
      По шаблону B2B планируется дальнейшая доработка и расширение возможностей!
      Обо всех своих предложениях и вопросах обращайтесь в тему поддержки шаблона.
      Добавил mister12 Добавлено 28.10.2016 Категория Платные шаблоны Системные требования Метод активации Без активации Ioncube Loader Нет OpenCart 1.5.6.4
      1.5.6.3
      1.5.6.2
      1.5.6.1
      1.5.6
      1.5.5.1
      1.5.5
      1.5.4.1
      1.5.3.1 ocStore 1.5.5.1.2
      1.5.5.1.1
      1.5.5.1
      1.5.4.1.2
      1.5.4.1.1
      1.5.4.1
      1.5.3.1 OpenCart.Pro, ocShop Обращение к серверу разработчика Нет Старая цена 0  
    • By OldAine
      AVA STORE
      ВЫ ПРИОБРЕЛИ ШАБЛОН, НО НЕ ЗНАЕТЕ КАКОЙ АРХИВ СКАЧАТЬ? -
      СМОТРИТЕ ОТВЕТ
       
       
            ВАЖНО!!!
      При первом обращении на почту: [email protected], за тех.поддержкой, обязательно, указывайте где именно Вы приобрели шаблон, с какого логина(ника) и e-mail была совершена покупка. Если вопрос напрямую связан с Вашим сайтом, то сразу укажите его домен. Тех. поддержка оказывается круглосуточно, но только покупателям шаблона, поэтому мы требуем подтверждения, что Вы являетесь нашим клиентом. Спасибо за понимание.
       
      Пожалуйста, во избежание недоразумений, не стесняйтесь задавать вопросы по шаблону, перед покупкой!
       
      Обратите внимание: Мы оказываем тех. поддержку и помогаем в решении проблем вызванных шаблоном, но не ищем работу, поэтому не стоит предлагать нам, за деньги, переделывать шаблон под Ваши нужды.
       
      Совместимость с движками
       
      Совместимость с модулями:
       
      Коротко о шаблоне:
       
      Бесплатные модули:
       
      FAQ | Часто задаваемые вопросы:
       
      Лицензия:
       
      В помощь новичкам:
       
      История изменений:
       
      РЕКОМЕНДУЮ:
      Рекомендуется устанавливать шаблон на последнюю версию движка - OcStore 15512 !
      Тормозит сайт? Нужна профессиональная оптимизация сайта? – обращайтесь к Snastik
      Консультации по SEO | SEO-оптимизация магазинов | Ускорение и оптимизация ?
  • Recently Browsing   0 members

    No registered users viewing this page.

×

Important Information

On our site, cookies are used and personal data is processed to improve the user interface. To find out what and what personal data we are processing, please go to the link. If you click "I agree," it means that you understand and accept all the conditions specified in this Privacy Notice.