как прокрутить до div после проверенного ввода радио

Question

Я использую плагин icheck jquery для стиля ввода радио

Мне нужно, когда проверено радио, прокрутить до специального идентификатора div

<input type="radio" class="checkb" name="selectplan" value="P6302" id="P6302">

И сценария

<script>

    $(document).ready(function () {
        $('input').iCheck({
            checkboxClass: 'icheckbox_square-red',
            radioClass: 'iradio_square-red',
            increaseArea: '20%' // optional
        });
    });
</script>

Answer 1

Вы можете использовать .animate( properties [, duration ] [, easing ] [, complete ] ) на change значения переключателя, чтобы получить требуемый результат.

DEMO

var str = `Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.`;


let html = $.map(document.querySelectorAll('input'), el => {
  return `<div id=${$(el).val()} class="mydiv"><b>${$(el).val()}</b>${str}</div>`;
});

$('#container').html(html.join('</br>'));

$("input[type=radio]").on('change',function(e) {
    $('html, body').animate({
        scrollTop: $(`#${$(e.target).val()}`).offset().top
    }, 1000);
});

.mydiv {
  padding: 5px;
  border: 1px solid #ccc;
}

.mydiv b {
  background: #3c3c3c;
  display: block;
  padding: 10px;
  color: #fff;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <input type="radio" class="checkb" name="selectplan" value="P6302"><label>P6302</label>
  <input type="radio" class="checkb" name="selectplan" value="P6303"><label>P6303</label>
  <input type="radio" class="checkb" name="selectplan" value="P6304"><label>P6304</label>
  <input type="radio" class="checkb" name="selectplan" value="P6305"><label>P6305</label>
  <input type="radio" class="checkb" name="selectplan" value="P6306"><label>P6306</label>
  <input type="radio" class="checkb" name="selectplan" value="P6307"><label>P6307</label>

  <div id='container'></div>

Answer 2

Вы можете прослушать событие «isChecked» библиотеки icheck и перейти к div с идентификатором имени флажка:

$('input').on('ifChecked', function(event) {

   // Fixed scroll target       
   const target = $('#target');

   // For dynamic targets: adjust the target selector like
   // const target = $($(event.target)).attr('name');

   $('html,body').animate({
      scrollTop: target.offset().top
   }, 1000);
});

В случае, если вы хотите, чтобы прокрутка происходила всякий раз, когда флажок установленнажмите, вместо этого используйте событие ifToggled.

Источники: https://github.com/fronteed/icheck#callbacks, jQuery Прокрутите к разделу Div , https://api.jquery.com/event.target/, http://api.jquery.com/attr/

Answer 3

$('input').on('ifChanged', function(event){
     $('html, body').animate({
        scrollTop: $("#myDiv").offset().top
    }, 2000);
});

Используйте этот код

Answer 4

Как это радио кнопка.Что вы можете сделать, это создать для него функцию onclick.Как вы знаете, когда кто-то нажимает на него, необходимо прокрутить вниз до раздела.Так что я не знаю, зачем вам нужен плагин.Оберните это в div.

$(".radio-button").click(function() {
        $('html, body').animate({

            scrollTop: $(".toyourdiv").offset().top-headerHeight
        }, 700);
});