сокращение кода jQuery

192
09 марта 2018, 14:13

Доброго дня!

Такая проблема: есть два абсолютно подобных события на jQuery (прокрутка до якоря при нажатии по ссылке). Сейчас я каждый раз при добавлении ссылки на сайт, добавляю по новой этот скрипт. Получается много кода, подобного кода. Чувствую что это как то возможно сократить. Просто добавляя новый линк в этот скрипт. Но не могу. Помогите пожалуйста.

Вот пример:

  $('a[href^="#advantages"]').bind('click.smoothscroll',function (e) { 
    e.preventDefault(); 
  
   var target = this.hash, 
     $target = $(target); 
    
    $('html, body').stop().animate({ 
     'scrollTop': $target.offset().top 
    }, 1200, 'swing', function () { 
      window.location.hash = target; 
    }); 
  }); 
 
  $('a[href^="#application"]').bind('click.smoothscroll',function (e) { 
    e.preventDefault(); 
  
   var target = this.hash, 
     $target = $(target); 
    
    $('html, body').stop().animate({ 
     'scrollTop': $target.offset().top 
    }, 1200, 'swing', function () { 
      window.location.hash = target; 
    }); 
  });

Answer 1

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

 $('a.anchor').bind('click.smoothscroll',function (e) {
    e.preventDefault();
   var target = this.hash,
     $target = $(target);
    $('html, body').stop().animate({
     'scrollTop': $target.offset().top
    }, 1200, 'swing', function () {
      window.location.hash = target;
    });
  });

Либо как предложили в комментариях. Если у вас для всех ссылок такого типа будет одинаковая анимация проще использовать селектор a[href^="#"]. Или даже без указания тега a. Вот так [href^="#"].

READ ALSO
Как запустить python скрипт из html при нажатии на кнопку?
HTML

Как запустить python скрипт из html при нажатии на кнопку?

Есть простая html страница с popup'омНужно запускать python скрипт при открытии попапа (попап открывается при нажатии на кнопку)

 234
Как перенести анимацию SVG из GearGenerator на сайт?
HTML

Как перенести анимацию SVG из GearGenerator на сайт?

Подскажите пожалуйста как правильно перенести и подключить вот эту http://geargeneratorcom/#200,200,100,6,1,0,0,4,1,8,2,4,27,-90,0,0,16,4,4,27,-60,1,1,12,1,12,20,-60,2,0,60,5,12,20,0,0,0,2,-563...

 219
Получение данных с html <input> в TypeScript
HTML

Получение данных с html <input> в TypeScript

Не могу получить значения с html

 173
Можно ли оптимизировать код? [требует правки]
HTML

Можно ли оптимизировать код? [требует правки]

Приветствую, данный код можно оптимизировать?

 287