Question

我正在尝试根据无线电点击将页面滚动到特定的部分ID。

目前我收到错误：Uncaught TypeError: Cannot read property 'top' of undefined

我以为我已经定义了它，我可以使用console.log(this.id);并获得正确的值，但必须有错误的方法！

这是JSfiddle link

谢谢！

Answer 1

问题出在那个地方，你正在尝试获取元素。你写道：

scrollTop: $(this.id).offset().top

它将与（我使用＆＃34; 1＆＃34;相同，例如，它可以是＆＃34; 2＆＃34;或＆＃34; 3＆＃34;等等）：

scrollTop: $("1").offset().top

但是在jquery中我们通过id选择：

$("#1")

所以最后你只需要在提供变量之前添加#：

scrollTop: $("#"+this.id).offset().top

这是没有错误的小提琴：https://jsfiddle.net/yxjy2u3p/1/

Answer 2

您可以按如下方式制作HTML：

<input type="radio" value="1" name="selection">1
<input type="radio" value="2" name="selection">2
<input type="radio" value="3" name="selection">3
<input type="radio" value="4" name="selection">4

您应该在此使用value属性而不是id，因为您对这些部分使用相同的ID。你应该有独特的ID，因为它可能会导致混乱和问题。现在ids 1,2,3,4仅属于这些部分。

在要滚动的代码中，您需要在选择要滚动到的部分ID之前附加"#"。

$(document).ready(function() {
    $('input:radio[name=selection]').change(function()
    {
        $('html,body').animate(
        {
                scrollTop: $('#'+this.value).offset().top
      }, 1000);
    });
});

在Radio Click上滚动页面到部分ID

2 个答案: