想要移動到不同的DIV按鈕點擊

我有5個div在我的html頁面和5個按鈕。我想通過自動滾動按鈕5點擊時獲得第5個div。但我不想使用的位置在X軸上滾動...我想要移動參考div div。所以我該怎麼做？幫我在jQuery或JavaScript。想要移動到不同的DIV按鈕點擊

來源

2011-03-16 Vinay Gayakwad

我想你需要[this]這樣的東西（http://djpate.com/2011/01/01/animated-scrollto-effect-jquery-plugin/） – add9 2011-03-16 13:06:53

好心來看看下面的鏈接

http://pastebin.com/Nav6aSQg

我已經在那裏粘貼了代碼。

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

來源

2011-03-16 13:09:37 Lalchand

http://stackoverflow.com/editing-help 。 – 2011-03-16 13:27:59

使用`scrollTop()`和`<div>`位置：

非動畫：

var $divs = $('div'), 
    $buttons = $('button'); 

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

    $(window).scrollTop($divs.eq(index).offset().top); 
});

Demo 1a →

動畫：

var $divs = $('div'), 
    $buttons = $('button'), 
    $hb = $('html, body'); 

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

    $hb.animate({scrollTop: $divs.eq(index).offset().top + 'px'}); 
});

Demo 1b →

使用`<div>` ID：

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

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

Demo 2 →

來源

2011-03-16 13:02:33

可能沒有確切的解決方案，但要實現這種解決方案的最簡單的方法是一樣的東西：

讓按鈕;

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

，並要在Button Click是移動DIV;

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

我希望你已經注意到了move_here。

來源

2017-01-04 11:41:22

想要移動到不同的DIV按鈕點擊

回答

使用scrollTop()和<div>位置：

非動畫：

動畫：

使用<div> ID：

相關問題

使用`scrollTop()`和`<div>`位置：

使用`<div>` ID：