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;
}

 

效果展示：

• 導航一
• 導航二
• 導航三
• 導航四

內容一

內容二

內容三

內容四

 

以上內容，如有錯誤請指出，不甚感激。