г. Владимир, пр. Ленина 15а, офис 410

8 (499) 404-14-01
(телефон офиса)

8 (904) 259-97-29
(ватсапп, вайбер, телеграмм)

пн-пт: с 09.00-18.00
e-mail: info@pavelsonar.net

Создать зафиксированный div, плавающий при прокрутке страницы, можно при помощи JQuery. Код приведен ниже:

  1. <script type='text/javascript'>
  2. $(function() {
  3. var fixed = $("#left_fixed_div");
  4. var offset = fixed.offset();
  5. var topPadding = 15;
  6. $(window).scroll(function() {
  7. if ($(window).scrollTop() > offset.top) {
  8. fixed.stop().animate({marginTop: $(window).scrollTop() - offset.top + topPadding});
  9. }
  10. else {
  11. fixed.stop().animate({marginTop: 0});
  12. };});
  13. });
  14. </script>

Никогда не исользуйте плавающие блоки для показа рекламы. Не портите свой сайт и глаза пользователей ^^

Приветствую читателей моего блога!

Иногда веб-мастеру требуется сделать плавную прокрутку к заданному месту на сайте. Тут встает вопрос, как это сделать? В данном посту я расскажу как можно реализовать подобное с использованием JQuery.

На самом деле ничего сложного. Расскажу на "пальцах" - есть id или class у блока CSS, есть ссылка, есть скрипт. 

Ссылке присваиваем класс (в данном случае ID блока)

  1. <a href="#block">Ваш блок</a>

Далее мы видим сам блок: 

  1. <div id="block">
  2. <h2>Текст заголовка</h2>
  3. Контент
  4. </div>

Теперь осталось подключить сам скрипт, чтобы мы плавно могли переместиться к нужному блоку при клике на ссылку. 

Сам скрипт Вы можете добавить между тегами <head> и </head>. Или же скопировать, создать текстовый документ, вставить код туда и сохранить его с разрешением .js. И потом прикрепить его Вот так:

  1. <script src="/main/ссылка на скрипт.js"></script>

В общем выбирать Вам. Ну а теперь вот он и сам код JQuery:

  1. $('a[href^="#"]').bind('click.smoothscroll',function (e) {
  2. e.preventDefault();
  3. var target = this.hash,
  4. $target = $(target);
  5. $('html, body').stop().animate({
  6. 'scrollTop': $target.offset().top
  7. }, 500, 'swing', function () {
  8. window.location.hash = target;
  9. });
  10. });

Рекомендую отличный хостинг