首页 > 移动平台 > 详细

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

时间:2016-01-13 17:45:51      阅读:210      评论:0      收藏:0      [点我收藏+]

 

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

 

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

原文:http://www.cnblogs.com/zcynine/p/5127575.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!