检查输入单选后如何滚动到 div答案

【问题标题】：how to scroll to a div after checked input radio检查输入单选后如何滚动到 div
【发布时间】：2018-11-09 02:03:18
【问题描述】：

我使用 icheck jquery 插件来设置输入单选的样式

我需要在检查单选时滚动到特殊的 div id

<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>

【问题讨论】：

你能画出你期望的对人们有帮助的东西吗

标签： javascript jquery html icheck

【解决方案1】：

您可以监听 icheck 库的“isChecked”事件并滚动到带有复选框名称 id 的 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 Scroll to Div、https://api.jquery.com/event.target/、http://api.jquery.com/attr/

【讨论】：

【解决方案2】：

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

使用此代码

【讨论】：

【解决方案3】：

您可以在单选按钮值的change 上使用.animate( properties [, duration ] [, easing ] [, complete ] ) 来获得所需的结果。

演示

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>

【讨论】：

【解决方案4】：

因为它是一个单选按钮。您可以做的是为其创建一个 onclick 函数。如您所知，当有人点击它时需要向下滚动到某个部分。所以我不知道你为什么需要这个插件。将其包裹在 div 中。

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

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

【讨论】：