页面内跳转到指定位置

<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>1li>
        <li>2li>
        <li>3li>
        <li>4li>
        <li>5li>
    ul>
    <ol id="ol">
        <li>1li>
        <li>2li>
        <li>3li>
        <li>4li>
        <li>5li>
    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">1a>li>
        <li><a name="a2">2a>li>
        <li><a name="a3">3a>li>
        <li><a name="a4">4a>li>
        <li><a name="a5">5a>li>
    ul>
    <ol id="ol">
        <li><a href="#a1">1a>li>
        <li><a href="#a2">2a>li>
        <li><a href="#a3">3a>li>
        <li><a href="#a4">4a>li>
        <li><a href="#a5">5a>li>
    ol>
body>


你可能感兴趣的:(页面内跳转到指定位置)