最近做合同模板頁面递鹉，遇到這樣一個場景：合同內容一般都會比較多，幾頁到幾十頁不等，需要用戶線上錄入的地方也會比較多而散他匪，而有些錄入項是必填項菇存，開始呢，只是把必填項做了標紅提示邦蜜。當多個必填項分布在多屏（打印頁）時依鸥，用戶自己找起來比較麻煩。為了解決這個體驗問題悼沈，驗證時需要滾動到第一個未錄入值的必填項的位置去贱迟。
滾動到瀏覽器的可視窗口的4種方法
其實，如果只是常規(guī)的表單元素絮供，要滾動定位到該元素的位置去衣吠，還是比較容易的，用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');//并不能觸發(fā)錨點定位
$('[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>
