Javascript 要在单击按钮时移动到不同的分区吗_Javascript_Jquery_Html_Css

Javascript 要在单击按钮时移动到不同的分区吗

javascript jquery html css

Javascript 要在单击按钮时移动到不同的分区吗,javascript,jquery,html,css,Javascript,Jquery,Html,Css,我的html页面中有5个div和5个按钮。我想在单击按钮5时自动滚动到第5个div。但我不想使用位置在x轴上滚动…我想使用div id参考移动。那么我该如何做呢？在jquery或javascript中帮助我。使用scrollTop（）和位置：非动画：有生气的：使用id：请查看以下链接我把代码贴在那边了 enter code here enter code here <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Trans

我的html页面中有5个div和5个按钮。我想在单击按钮5时自动滚动到第5个div。但我不想使用位置在x轴上滚动…我想使用div id参考移动。那么我该如何做呢？在jquery或javascript中帮助我。

使用

scrollTop（）

和

位置：非动画：

有生气的：

使用

id：

请查看以下链接

我把代码贴在那边了

enter code here
enter code here




<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
    <title>Insert title here</title>
    <script type="text/javascript">
function scroll(val)
{
    //alert(document.getElementById(val));
    document.getElementById(val).click()
}

</script>
</head>
<body>
<div id="div1" style="height:200px">
The content of your div1 here.
</div>

<div id="div2" style="height:200px">
The content of your div2 here.
</div>

<div id="div3" style="height:200px">
The content of your div3 here.
</div>

<div id="div4" style="height:200px">
The content of your div4 here.
</div>

<div id="div5" style="height:200px">
The content of your div5 here.
</div>

<div style="display:none;">
<a href="#div1" id="id1">Link Text Here</a>
<a href="#div2" id="id2">Link Text Here</a>
<a href="#div3" id="id3">Link Text Here</a>
<a href="#div4" id="id4">Link Text Here</a>
<a href="#div5" id="id5">Link Text Here</a>
</div>


<input type="button" onclick="scroll('id1')" value="button1"></input>
<input type="button" onclick="scroll('id2')" value="button2"></input>
<input type="button" onclick="scroll('id3')" value="button3"></input>
<input type="button" onclick="scroll('id4')" value="button4"></input>
<input type="button" onclick="scroll('id5')" value="button5"></input>


</body>
</html>

enter code here

在此处输入代码
在这里输入代码
在此处插入标题
功能滚动（val）
{
//警报（document.getElementById（val））；
document.getElementById（val）.单击（）
}
这里是您的div1的内容。
这里是你的第二季的内容。
这里是你的div3的内容。
这里是你的第四单元的内容。
这里是你第5课的内容。
在这里输入代码

可能不是精确的解决方案，但实现这种解决方案的最简单方法如下：

让按钮打开

<Button><a href="#move_here" class="myClass"> Click It </a></Button>

我希望，您已经注意到

移动到这里

我想您需要这样的东西

// snip...
$buttons.live('click', function ()
{
    var $this = $(this),
        index = $buttons.index(this);

    window.location.hash = $divs.eq(index).attr('id');
});

enter code here
enter code here




<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
    <title>Insert title here</title>
    <script type="text/javascript">
function scroll(val)
{
    //alert(document.getElementById(val));
    document.getElementById(val).click()
}

</script>
</head>
<body>
<div id="div1" style="height:200px">
The content of your div1 here.
</div>

<div id="div2" style="height:200px">
The content of your div2 here.
</div>

<div id="div3" style="height:200px">
The content of your div3 here.
</div>

<div id="div4" style="height:200px">
The content of your div4 here.
</div>

<div id="div5" style="height:200px">
The content of your div5 here.
</div>

<div style="display:none;">
<a href="#div1" id="id1">Link Text Here</a>
<a href="#div2" id="id2">Link Text Here</a>
<a href="#div3" id="id3">Link Text Here</a>
<a href="#div4" id="id4">Link Text Here</a>
<a href="#div5" id="id5">Link Text Here</a>
</div>


<input type="button" onclick="scroll('id1')" value="button1"></input>
<input type="button" onclick="scroll('id2')" value="button2"></input>
<input type="button" onclick="scroll('id3')" value="button3"></input>
<input type="button" onclick="scroll('id4')" value="button4"></input>
<input type="button" onclick="scroll('id5')" value="button5"></input>


</body>
</html>

enter code here

<Button><a href="#move_here" class="myClass"> Click It </a></Button>

<div>
    <a name="move_here"></a>
    ...div content here...
</div>