数据校验失败时滚动条自动移动到校验失败的元素的位置

 

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

 

转载于:https://www.cnblogs.com/zcynine/p/5127575.html