want to move to different DIV on button click_问答_开发者

want to move to different DIV on button click

开发者 https://www.devze.com 2023-02-16 23:44 出处：网络

I have 5 div\'s in my html page a开发者_如何学Cnd 5 buttons.I want to got to 5th div by auto-scrolling when button 5 is clicked.But i dont want to use the position to scroll in x axis...i want to move

I have 5 div's in my html page a开发者_如何学Cnd 5 buttons.I want to got to 5th div by auto-scrolling when button 5 is clicked.But i dont want to use the position to scroll in x axis...i want to move with reference with div id.So how can i do that? Help me in jquery or javascript.

Using `scrollTop()` and the `<div>` position:

Non-animated:

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 →

Animated:

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 →

Using the `<div>` id:

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

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

Demo 2 →

kindly take a look at the following link

http://pastebin.com/Nav6aSQg

i have pasted the code over there.

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

Not probably the exact solution, but the easiest way to achieve this kind of solution is something like:

Let the button is;

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

and the DIV where you want to move on Button Click is;

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

I hope, you've noticed move_here.

Mine worked with id you can try it out

<a href="#art"><button class="button">see</button></a>

<div id="art" class="artpage"><div>

want to move to different DIV on button click

Using `scrollTop()` and the `<div>` position:

Non-animated:

Animated:

Using the `<div>` id:

精彩评论

关注公众号

热门标签

图文推荐

want to move to different DIV on button click

Using scrollTop() and the <div> position:

Non-animated:

Animated:

Using the <div> id:

更多 问答 相关资讯：

精彩评论

关注公众号

热门标签

图文推荐

Using `scrollTop()` and the `<div>` position:

Using the `<div>` id:

更多问答相关资讯：