实现“类似电梯”回到网页指定位置 

<!DOCTYPE html>
<html>
<head lang="zh">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta charset="utf-8" /> 
    <meta content="yes" name="apple-mobile-web-app-capable"/>
    <meta content="yes" name="apple-touch-fullscreen"/>
    <meta content="telephone=no" name="format-detection"/>
    <meta content="black" name="apple-mobile-web-app-status-bar-style">
    <meta content="#ffffff" name="msapplication-TileColor" />
    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport" />
    <title>采销商品基本信息</title>
    <link rel="stylesheet" href="css/index.css"/>
    

</head> 
<body>

<div class="pox">
    佛得角粉丝卡<span>jkladja</span>放到那送到哪
</div>

<div class="pox-1">
    佛得角粉丝卡<span>jkladja</span>放到那送到哪<input type="text" name="" value="hello">
</div>
<p>1</p><p>1</p><p class="button1">1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p>
        <p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p>
        <p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p class="button2">2</p>
        <p>1</p><p class="button3">3</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p>
        <p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p>
        <p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p>
        <p>1</p><p>1</p><p class="button4">4</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p>
        <p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p>
        <div class="my-button">
            <ul>
                <li name="button1">按钮1</li>
                <li name="button2">按钮2</li>
                <li name="button3">按钮3</li>
                <li name="button4">按钮4</li>
            </ul>
        </div>



<script type="text/javascript" src="./js/jquery.js"></script>
<script type="text/javascript">

jQuery.fn.scrollTop=function(speed){
    var targetOffset=$(this).offset().top;
    console.log(targetOffset);
    $("html,body").stop().animate({scrollTop:targetOffset},speed);
    return this;
}
    $(".my-button ul li").click(function(){
        var thisname='.'+$(this).attr("name");//构建class的名字eg：.name；
        $(thisname).scrollTop(500);
        return false;
    });



</script>
  
</body> 
</html>

 点击按钮1234分别对应的回到button1/button2/button3/button4的位置！

posted @ 2016-08-26 14:57  小猪冒泡  阅读(198)  评论(0)  编辑  收藏  举报