滚动到浏览器的可视窗口的4种方法

最新推荐文章于 2025-02-20 17:28:35 发布

翡蛟

最新推荐文章于 2025-02-20 17:28:35 发布

阅读量546

点赞数

分类专栏：前端开发

本文链接：https://blog.youkuaiyun.com/wolf_or_dog/article/details/103618110

版权

前端开发专栏收录该内容

6 篇文章

订阅专栏

最近做合同模板页面，遇到这样一个场景：合同内容一般都会比较多，几页到几十页不等，需要用户线上录入的地方也会比较多而散，而有些录入项是必填项，开始呢，只是把必填项做了标红提示。当多个必填项分布在多屏（打印页）时，用户自己找起来比较麻烦。为了解决这个体验问题，验证时需要滚动到第一个未录入值的必填项的位置去。

滚动到浏览器的可视窗口的4种方法

其实，如果只是常规的表单元素，要滚动定位到该元素的位置去，还是比较容易的，用focus()方法就能实现。可是，我们总会有些自定义的东西，比如模拟移动端开关，模拟在□内打√，打×类的等等。即，总会有些标签是非表单类的。这时候，仅仅是focus就满足不了了。所以针对非表单类的标签，我总结了以下4种实现方法：

tabindex属性 + focus()方法
scrollIntoView()方法
a标签href属性锚点形式
scrollTo()或scrollTop()方法

一、`tabindex`属性 + `focus()`方法（推荐）

简要说明：从tabindex属性的API介绍可以看出来，只要给标签加上此属性，那么此标签就可以像表单元素一样被focus聚焦。平滑滚动效果：无，垂直居中效果：有。
兼容性：全兼容。API介绍自行查看，偷懒的可以看下图：
复杂度：简单。

二、`scrollIntoView()`方法

简要说明：h5的新属性，效果可以，新的实验属性，兼容性比较差。平滑滚动效果：有，垂直居中效果：有。
兼容性：部分兼容。API介绍自行查看，偷懒的可以看下图：
复杂度：简单。

三、`a`标签`href`属性锚点形式

简要说明：h5版本前，用的name属性，h5版本后，可以用id属性做目标元素锚点，当然，如果当前标签的id有其他用处，需要在该标签前面插入一个新的目标元素做锚点。平滑滚动效果：无，垂直居中效果：无。
兼容性：全兼容。
复杂度：简单。

四、`scrollTo()`或`scrollTop()`方法

简要说明：前者是js原生方法，作用于window窗口上，后者是jquery方法，作用于所有标签元素（个人测试时，在body标签上无效），此外，前者兼容性还算可以，平滑滚动效果的兼容性不太好，后者，无平滑滚动效果至于两者的垂直居中效果，需要js自行计算，这一点上，相比之前的3种方法稍显复杂。平滑滚动效果：有，垂直居中效果：有。
兼容性：前者：部分兼容，后者：全兼容。API介绍自行查看，偷懒的可以看下图：
复杂度：稍微复杂点。

个人推荐第一种方法，当然你可以根据具体的场景自行选择。

下面附上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>