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>
  • 效果:


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

    时间: 2024-11-06 09:43:16

    js滚动到指定元素的相关文章

    使页面滚动到指定元素+优化+API介绍(JS动画)

    前言 当页面最上部有顶部菜单是,使用锚点跳转的方法很容易挡住想要呈现的内容(如下图技能两个字被挡住了一半),为避免出现这样的问题,故滚动到指定元素使用用JS的方法来实现. 1  使用的API简介 document.querySelectorAll preventDefault currentTarget getAttribute document.querySelector offsetTop window.scrollTo 2  初版 代码及思路如下: //1 点击导航跳到指定位置第一步,获取

    滚动到指定元素的id处+当元素出现在浏览器显示区域就会自动加载

    //滚动到指定元素的id处 如:$("#Exam82") function Jump() { var scroll_offset = $("#Exam82").offset();  //得到Exam82这个div层的offset,包含两个值,top和left $("body,html").animate({ scrollTop: scroll_offset.top  //让body的scrollTop等于Exam82的top,就实现了滚动 },

    js滚动到指定位置导航栏固定顶部

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>js滚动到指定位置导航栏固定顶部</title> <style type="text/css"> body{height: 2500px; margin: 0; padding: 0;} .banner{height: 250px; width: 100%; bac

    [Js]删除数组指定元素

    写在前面 在最近的项目中,有用到js对数组的操作,之前自己几乎没有用到这种方法,这里就记录一下,算是对学到的东西的一种总结吧. 数组对象splice方法 splice() 方法向/从数组中添加/删除项目,然后返回被删除的项目.该方法会改变原始数组. 基本语法 arrayObject.splice(index,howmany,item1,.....,itemX)  参数说明 index:必需.整数,规定添加/删除项目的位置,使用负数可从数组结尾处规定位置. howmany:必需.要删除的项目数量.

    页面滚动到指定元素区域

    该代码段可将指定元素平滑滚动到浏览器窗口的可见区域. const smoothScroll = element => document.querySelector(element).scrollIntoView({ behavior: 'smooth' }); smoothScroll('#fooBar'); smoothScroll('.fooBar'); 原文地址:https://www.cnblogs.com/zhenguo-chen/p/12032165.html

    jquery滚动到指定元素,模仿锚点

    html 1 <div class="pd-nav"> 2 <div class="n-item active"> 3 保险服务 <i></i> 4 </div> 5 <div class="n-item " id="bzjh1"> 6 保障计划 7 <i></i> 8 </div> 9 <div class=&q

    js打印html指定元素,解决动态获取的图片无法打印问题

    用js来调用浏览器的打印接口很容易,一两行代码就能搞定,但是有些数据是通过动态生成的,例如一些动态生成的二维码,有时候调用打印接口图片会无法显示 为了解决这个问题,建议使用下面这个库 下载:https://github.com/tanathos/jquery.jqprint <script src="jquery.jqprint-0.3.js"/> <script> $('#youid').jqprint({ debug: false, //如果是true则可以

    js 数组删除指定元素

    1 Array.prototype.remove = function(obj) { 2 for (var i = 0; i < this.length; i++) { 3 var temp = this[i]; 4 if (!isNaN(obj)) {//isNaN() 函数用于检查其参数是否是非数字值. 5 temp = i; 6 } 7 if (temp == obj) {//判断当前值,和我想要删除的值是否相等 8 for (var j = i; j < this.length; j+

    点击滚动到指定元素位置

    $(document).ready(function (){ $("#scroll").click(function (){ $('html, body').animate({ scrollTop: $("#div").offset().top }, 500); }); }); 使用scrollTop方法,加上一点延时动画(animate) 原文地址:https://www.cnblogs.com/wangyongx/p/10932253.html