ul动态添加click事件+js滑动条滚动

 

jquery 1.7版以前使用live动态绑定事件

$("#testdiv ul li").live("click",function(){
});

jquery 1.7版以后使用on动态绑定事件

$("#testdiv ul").on("click","li"function() {
     //do something here
});
示例: js滑动条滚动
 
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GBK" />
<title>无标题文档</title>
<style>
    #rights    {
        right: 0;
        top: 100px;
        width: 100px;
        height: 300px;
        background-color: pink;
        position: fixed;
    }
    #rights a {
        float: left;
        width: 100px;
        height: 100px;
        text-align: center;
        line-height: 100px;
    }
    
</style>

</head>

<body>
    <div id="rights"><a data-age="a1">a</a><a data-age="a2">b</a><a data-age="a3">c</a></div>
    页面内容1<br />
    页面内容2<br />
    页面内容3<br />
    页面内容4<br />
    页面内容5<br />
    页面内容<br />
    页面内容<br />
    <span id="a1" class="title" >天一广场</span><br />
    页面内容<br />
    页面内容<br />
    页面内容<br />

    页面内容<br />
    页面内容<br />
    页面内容<br />
    <span id="a2" class="title" >天一广场</span><br />
    页面内容<br />
    页面内容<br />
    页面内容<br />
    页面内容<br />
    页面内容<br />
    <span id="a3" class="title" >天一广场</span><br />
    页面内容<br />
    页面内容<br />
    页面内容<br />
    页面内容<br />
    页面内容<br />
    页面内容<br />
    页面内容<br />
    页面内容<br />
</body>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
    $("#rights").on("click","a", function() {
        var d=$(this).attr("data-age");
        console.log(d)
        $('html, body').animate({scrollTop: $('#'+d).offset().top}, 500)     
    });


</script>
</html>

 

其他方法:

https://www.cnblogs.com/nifengs/p/5104763.html

posted @ 2018-07-16 17:10  dontes  阅读(807)  评论(0编辑  收藏  举报