最近做合同模板页面，遇到这样一个场景：合同内容一般都会比较多，几页到几十页不等，需要用户线上录入的地方也会比较多而散，而有些录入项是必填项，开始呢，只是把必填项做了标红提示。当多个必填项分布在多屏（打印页）时，用户自己找起来比较麻烦。为了解决这个体验问题，验证时需要滚动到第一个未录入值的必填项的位置去。
滚动到浏览器的可视窗口的4种方法
其实，如果只是常规的表单元素，要滚动定位到该元素的位置去，还是比较容易的，用focus()方法就能实现。可是，我们总会有些自定义的东西，比如模拟移动端开关，模拟在□内打√，打×类的等等。即，总会有些标签是非表单类的。这时候，仅仅是focus就满足不了了。所以针对非表单类的标签，我总结了以下4种实现方法：
-
tabindex属性 +focus()方法 -
scrollIntoView()方法 -
a标签href属性锚点形式 -
scrollTo()或scrollTop()方法
一、tabindex属性 + focus()方法（推荐）
- 简要说明：从
tabindex属性的API介绍可以看出来，只要给标签加上此属性，那么此标签就可以像表单元素一样被focus聚焦。平滑滚动效果：无，垂直居中效果：有。 - 兼容性：全兼容。API介绍自行查看，偷懒的可以看下图：
tabindex.png
- 复杂度：简单。
二、scrollIntoView()方法
- 简要说明：h5的新属性，效果可以，新的实验属性，兼容性比较差。平滑滚动效果：有，垂直居中效果：有。
- 兼容性：部分兼容。API介绍自行查看，偷懒的可以看下图：
scrollIntoView.png
- 复杂度：简单。
三、a标签href属性锚点形式
- 简要说明：h5版本前，用的name属性，h5版本后，可以用id属性做目标元素锚点，当然，如果当前标签的id有其他用处，需要在该标签前面插入一个新的目标元素做锚点。平滑滚动效果：无，垂直居中效果：无。
- 兼容性：全兼容。
- 复杂度：简单。
四、scrollTo()或scrollTop()方法
- 简要说明：前者是js原生方法，作用于window窗口上，后者是jquery方法，作用于所有标签元素（个人测试时，在body标签上无效），此外，前者兼容性还算可以，平滑滚动效果的兼容性不太好，后者，无平滑滚动效果至于两者的垂直居中效果，需要js自行计算，这一点上，相比之前的3种方法稍显复杂。平滑滚动效果：有，垂直居中效果：有。
- 兼容性： 前者：部分兼容，后者：全兼容。API介绍自行查看，偷懒的可以看下图：
scrollTo.png
- 复杂度：稍微复杂点。
个人推荐第一种方法，当然你可以根据具体的场景自行选择。
下面附上4种方法的完整的测试代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="Access-Control-Allow-Origin" content="*">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta name="format-detection" content="telephone=no">
<title>滚动定位到指定元素的位置</title>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.clear:after{
content: '';
display: block;
width: 0;
height: 0;
clear: both;
}
body{
line-height: 24px;
font: 14px Helvetica Neue,Helvetica,PingFang SC,Tahoma,Arial,sans-serif;
}
h1,h2,h3{
font-weight: 400;
}
/*自定义样式*/
.page{
margin: 10px auto;
width: 90vw;
height: 90vh;
text-align: center;
color: #000;
font-size: 24px;
}
.page1{
background: darkred;
}
.page2{
background: green;
}
.page3{
background: blue;
}
.page4{
background: purple;
}
.form{
margin: 30px auto;
width: 90vw;
text-indent: 8em;
}
.tips{
outline: 1px solid #f00;
}
</style>
</head>
<body>
<div class="scrollWrap">
<a href="#targetEl" name="targetEl">锚点定位</a>
<div class="noprint" style="position: fixed;left: 20px;top: 20px;">
<button class="js-method1">tabindex+focus</button>
<br>
<button class="js-method2">a锚点</button>
<br>
<button class="js-method3">scrollIntoView</button>
<br>
<button class="js-method4">scrollTo/scrollTop</button>
</div>
<div class="page page1">第一页</div>
<div class="page page2">第二页</div>
<div class="form" id="targetEl">
<form >
<div>
<input type="text" name="text" value="input text">
<input type="password" name="psw" value="123456">
</div>
<div>
<input type="radio" name="sex" value="男">
<input type="radio" name="sex" value="女">
</div>
<div>
<input type="checkbox" name="aihao" value="旅游">
<input type="checkbox" name="aihao" value="运动">
<input type="checkbox" name="aihao" value="观影">
<input type="checkbox" name="aihao" value="其他">
</div>
<div>
<input type="file" name="file" value="file"/>
</div>
<div>
<input type="button" name="button" value="button">
<input type="reset" name="reset" value="reset" />
</div>
<div>
<textarea name="txtarea" cols="30" rows="10">textarea</textarea>
<select name="select">
<option value="1">11111</option>
<option value="2">22222</option>
</select>
</div>
<input type="submit" name="submit" value="Submit" id="btn_ok"/>
</form>
</div>
<div class="page page3">第三页</div>
<div class="page page4">第四页</div>
</div>
<script>
$('.js-method1').on('click',function () {
// tabindex+focus
$('[tabindex]').removeAttr('tabindex');
$('#targetEl').attr('tabindex',3333);
$('#targetEl').addClass('tips');//标红，方便识别目标元素
$('#targetEl').focus();
});
$('.js-method2').on('click',function () {
// a锚点
// $('[href="#targetEl"]').trigger('click');//并不能触发锚点定位
$('[href="#targetEl"]')[0].click();
$('#targetEl').addClass('tips');
// $('#targetEl').focus();
});
$('.js-method3').on('click',function () {
// scrollIntoView
$('#targetEl')[0].scrollIntoView({behavior: "instant", block: "center", inline: "nearest"});
$('#targetEl').addClass('tips');//标红，方便识别目标元素
// $('#targetEl').focus();
});
$('.js-method4').on('click',function () {
// scrollTo/scrollTop
var y = $('#targetEl')[0].offsetTop;//该标签距离页面顶部的距离：1203
var viewH = window.document.documentElement.clientHeight;//浏览器视窗的高度：624
var scrollH = y-viewH/2;//忽略标签本身的高度情况下
console.log('合适的滚动距离：'+scrollH);
// window.scrollTo(0, scrollH);//浏览器窗口级别滚动
window.scrollTo({
top: scrollH,
behavior: "smooth"
});
// $("#id").scrollTop(y);//具体的标签级别滚动
$('#targetEl').addClass('tips');//标红，方便识别目标元素
// $('#targetEl').focus();
});
</script>
</body>
</html>
网友评论