how to scroll to a div after checked input radio

Question

I use the icheck jquery plugin for style the input radio

I need to when checked the radio scroll to the special div id

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

And script

<script>

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

Answer 1

You could use .animate( properties [, duration ] [, easing ] [, complete ] ) on change of radio button value to get the required result.

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

As it is a Radio Button. What you can do is create an onclick function to it. As you know when someone clicks on it needs to scroll down to a section. So I don't know why you need the plugin. Wrap it in div.

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

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

Answer 3

You could listen to the "isChecked" event of the icheck library and scroll to the div with the id of the checkbox name:

$('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);
});

In case you want the scroll to happen whenever the checkbox is clicked, use the ifToggled event instead.

Soures: https://github.com/fronteed/icheck#callbacks, jQuery Scroll to Div, https://api.jquery.com/event.target/, http://api.jquery.com/attr/

Answer 4

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

Use this code