zoukankan      html  css  js  c++  java
  • 数据校验失败时滚动条自动移动到校验失败的元素的位置

    jQuery方法

    获取元素的位置:$("selector").offset().top

    获取窗口:$("html,body")

    产生动画:animate({scrollTop:n},time)

    $("html,body").animate({ scrollTop: $("selector").offset().top }, 1000);

    同理可以写出滚动到顶部的jQuery代码

    $(function(){
        //点击id为go_top的元素时网页回到顶部
        $("#go_top").click(function(){
            $(’html,body’).animate({scrollTop:0},1000);//回到顶端
            return false;
        });
    });

    原生JS方法

    JS控制滚动条的位置:

    window.scrollTo(x,y);

    竖向滚动条置顶

    window.scrollTo(0,0);

    竖向滚动条置底

    window.scrollTo(0,document.body.scrollHeight)

    移动到指定元素位置

    var oDiv = document.getElementById('testDiv');
    window.scrollTo(0,oDiv.offsetTop + scrollTop);

    缓冲运动到指定元素位置

    var oDiv = document.getElementById('testDiv');
    var timer = null;
    
    timer = setInterval(function(){
        //目标位置
        var target = oDiv.offsetTop + scrollTop;
        //当前位置
        var cur = document.scrollTop;
        //计算速度
        var speed = (cur - target)/6>0 ? parseInt(Math.ceil((cur - target)/6)) : clearInterval(timer);
        //移动滚动条
        window.scrollTo(0,speed);
    },1000);
  • 相关阅读:
    Java配置jdk图文教程
    线程池介绍与应用
    继承机制的探讨
    1.深入分析_NIO性能分析
    1.类的加载机制_继承类的加载(一个小的Demo)说明
    githup创建新java项目
    UE常用快捷键使用
    堡垒机上传文件
    16.linux常用查看命令
    15.vi/vim编辑器下常用光标移动
  • 原文地址:https://www.cnblogs.com/zcynine/p/5127575.html
Copyright © 2011-2022 走看看