页面内跳转到指定位置

最新推荐文章于 2024-08-21 17:48:30 发布

mj_leona

最新推荐文章于 2024-08-21 17:48:30 发布

阅读量2.2k

点赞数 1

本文链接：https://blog.csdn.net/mj_leona/article/details/79639359

版权

<style>
    *{
        margin: 0;
        padding: 0;
    }
    html, body{
        width: 100%;
        height: 100%;
    }
    ul,ol{
        list-style: none;
    }
    #ul{
        width: 100%;
        height: 100%;
    }
    #ul li{
        width: 100%;
        height: 100%;
    }
    #ol{
        position:fixed;
        top: 100px;
        right: 0;
    }
    #ol li{
        width: 50px;
        height: 50px;
        font-size: 30px;
        line-height: 50px;
        text-align: center;
        border: 1px solid #cccccc;
        cursor: pointer;
    }

</style>

<body>
    <ul id="ul">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>
    <ol id="ol">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ol>
</body>

//js实现缓动效果

<script>

function $(id) {
        return document.getElementById(id)
    }

    window.onload = function () {
        var ullis = $("ul").getElementsByTagName("li");
        var ollis = $("ol").getElementsByTagName("li");
        var colors = ["yellow","red","blue","orange","green"];
        var leader = 0,target = 0,timer = null;
        for(var i=0; i<ullis.length;i++){
            ullis[i].style.backgroundColor = colors[i];
            ollis[i].style.backgroundColor = colors[i];
            ollis[i].index = i;
            ollis[i].onclick = function () {
                target = ullis[this.index].offsetTop;
                timer = setInterval(function () {
                    leader = leader + (target-leader)/10;
                    window.scrollTo(0,leader);
                },30)
            }
        }

    }
</script>

同样可以采用html锚链接的方式来实现

<body>
    <ul id="ul">
        <li><a name="a1">1</a></li>
        <li><a name="a2">2</a></li>
        <li><a name="a3">3</a></li>
        <li><a name="a4">4</a></li>
        <li><a name="a5">5</a></li>
    </ul>
    <ol id="ol">
        <li><a href="#a1">1</a></li>
        <li><a href="#a2">2</a></li>
        <li><a href="#a3">3</a></li>
        <li><a href="#a4">4</a></li>
        <li><a href="#a5">5</a></li>
    </ol>
</body>