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

245
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 скрипт при открытии попапа (попап открывается при нажатии на кнопку)

 302
Как перенести анимацию 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...

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

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

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

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

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

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

 371