码迷,mamicode.com
首页 > Web开发 > 详细

js滚动到指定元素

时间:2018-05-13 15:36:41      阅读:161      评论:0      收藏:0      [点我收藏+]

标签:js滚动到指定元素

  • 代码:
    <style>
    button{
        position: fixed;
        bottom: 0;
        right: 0;
    }
    </style>
    <button id="button">click to see</button>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>2</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>3</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <a id="ele" href="#">see me</a>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>3</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>4</p>
    <p>1</p>
    <p>1</p>
    <script>
    var button = document.getElementsByTagName(‘button‘)[0]
    button.onclick = function(){
        clickToSee(‘ele‘)   
    }
    function clickToSee(id,time = 1){
        var c_top = document.body.scrollTop
        var ele = document.getElementById(id)
        var e_top = ele.offsetTop
        var diff = e_top - c_top
        var step = diff/100
        time = time/100*1000
        var o_flag
        if(diff>0){
            o_flag = true
        }else{
            o_flag = false
        }
        var timer = setInterval(function(){
            var c_flag
            diff -= step
            window.scrollBy(0,step)
            if(diff>0){
                c_flag = true
            }else{
                c_flag = false
            }
            if(!o_flag === c_flag){
                clearInterval(timer)
            }
            console.log(diff)
        },time)
    }
    </script>
  • 效果:
    技术分享图片
    技术分享图片
    技术分享图片
  • js滚动到指定元素

    标签:js滚动到指定元素

    原文地址:http://blog.51cto.com/12173069/2115691

    (0)
    (0)
       
    举报
    评论 一句话评论(0
    登录后才能评论!
    © 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
    迷上了代码!