温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

js滚动到指定元素

发布时间:2020-06-12 20:52:28 来源:网络 阅读:4104 作者:Lee_吉 栏目:web开发
  1. 代码:
    <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>
  2. 效果:
    js滚动到指定元素
    js滚动到指定元素
    js滚动到指定元素
向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

AI