JS_动态定位效果

html提供了一个功能：点击一个a标签，只要在href属性中写上#id就可以定位到那个id的位置，但是为了更好的用户体验，考虑使用缓动公式来达到这个需求。

缓动公式网上搜搜就有好多，五花八门的。自己写了一个相对比较好理解的，比较笨的方法用在很多个小例子上面。下面po下我的代码

html:

<div class="theContent">
    
        <div class="nav">
            <ul>
                <li id="nav1" class="title">导航一</li>
                <li id="nav2" class="title">导航二</li>
                <li id="nav3" class="title">导航三</li>
                <li id="nav4" class="title">导航四</li>
            </ul>
        </div>
        <div class="content" id="txt1">内容一</div>
        <div class="content" id="txt2">内容二</div>
        <div class="content" id="txt3">内容三</div>
        <div class="content" id="txt4">内容四</div>
    
    </div>

css代码

ul{
    list-style: none;
}
.nav{
    width: 100%;
    height: 200px;
    background:pink;
    padding-top:50px; 
}
.nav ul{
    width: 410px;
    height: 40px;
    margin:0 auto;
}
.nav ul li{
    float: left;
    height: 40px;
    width: 100px;
    line-height:40px;
    text-align: center; 
    border: 1px solid #000;
    cursor: pointer;
}
.content{
    width:100%;
    height: 400px;
}
#nav1,#txt1{
    background: #FFE1FF;
}
#nav2,#txt2{
    background: #FFD39B;
}
#nav3,#txt3{
    background: #FFBBFF;
}
#nav4,#txt4{
    background: #FFAEB9;
}
.theContent{
    height: 2300px;
}

js:

window.addEventListener("load",function(){
    
    var nav = getClass("title");
    var txt = getClass("content");
    var len = nav.length;

    for(var i=0;i<len;i++){
        (function(m){
            nav[i].addEventListener("click",function(){
                //document.documentElement.scrollTop = document.body.scrollTop = txt[m].offsetTop;
                var des = txt[m].offsetTop;
                var start = window.pageYOffset || document.documentElement.offsetTop;
                moveSlowly(des,start);
            })
        })(i)
    }

})

var timer = null;

function moveSlowly(des,start,time){
    clearInterval(timer);
    var speedTime = time || 100;
    var start = start || 0;
    var distance = des - start;
    var speed = distance/speedTime;
    var i = 1;
    var pos = start;

    timer = setInterval(function(){

        if(i == speedTime){
            pos = des;
            document.documentElement.scrollTop = document.body.scrollTop = pos;
            clearInterval(timer);
        }else{
            pos = pos + speed;
            document.documentElement.scrollTop = document.body.scrollTop = pos;
            console.log(pos)
            i++;
        }

    },1)
}


function getClass(clsName,Parent){
    var oParent = Parent ? document.getElementById(Parent): document;
    var eles = [];
    var elements = oParent.getElementsByTagName("*");
    var len = elements.length;

    for(var i =0;i<len;i++){
        if(clsName == elements[i].className){
            eles.push(elements[i])
        }
    }

    return eles;
}

效果展示：

• 导航一
• 导航二
• 导航三
• 导航四

内容一

内容二

内容三

内容四

以上内容，如有错误请指出，不甚感激。