js 实现自动滚动 缓慢滚动元素到可视区域

背景：

​​​​在页面进行滚动元素到可视区域的时候，一般都使用跳转href加#的方式进行锚点定位，但是有缺陷

（1）只适用于整体网页的锚点定位，不能对于某个区域进行定位滚动

（2）在框架中如果路由使用hash则再使用锚点定位（#）就不起作用了

示例1整体网页滚动到可视区域：

   <div>
        <div>
            sdkf加油艾斯芬尼瓦肯日晚覅noir额外农人外内容   
        </div>
        <div>
            sdkf加油艾斯芬尼瓦肯日晚覅noir额外农人外内容   
        </div>
        <div>
            sdkf加油艾斯芬尼瓦肯日晚覅noir额外农人外内容   
        </div>
        <div>
            sdkf加油艾斯芬尼瓦肯日晚覅noir额外农人外内容   
        </div>
        <div style="font-weight: bold; color:orange;" id="xiabiao">
            来了
        </div>
        <div>
            sdkf加油艾斯芬尼瓦肯日晚覅noir额外农人外内容   
        </div>
        <div>
            sdkf加油艾斯芬尼瓦肯日晚覅noir额外农人外内容   
        </div>
        <div>
            sdkf加油艾斯芬尼瓦肯日晚覅noir额外农人外内容   
        </div>
        <div>
            sdkf加油艾斯芬尼瓦肯日晚覅noir额外农人外内容   
        </div>
        <div>
            sdkf加油艾斯芬尼瓦肯日晚覅noir额外农人外内容   
        </div>
        <div>
            sdkf加油艾斯芬尼瓦肯日晚覅noir额外农人外内容   
        </div>
       
        <button onclick="ff()">
            点击跳转
        </button>
    </div>
    <script>
        function ff(){
            //点击按钮平滑滚动到此标签位置
            let box=document.getElementById('xiabiao');
            //锚点定位
            box.scrollIntoView();
            //平滑滚动 ：behavior:'smooth'
            box.scrollIntoView({behavior:'smooth'})
            //点击按钮平滑滚动到可视范围的垂直中间位置
            box.scrollIntoView({behavior:'smooth',block:'center'})

        }
    </script>

示例2在一定区域内进行滚动定位：

<style>
    .wwBox{
        width:300px;
        height:100px;
        border:1px solid #000;
    }
    .wwBox .son{
        display: flex;
    }
    .wwBox .son div{
        width:300px;
        height:100%; 
        font-weight: bold ;
        font-size: 20px;
        line-height: 100px;
        text-align: center;
        flex: 12;
        display: inline-block;
    }
</style>

<div>
    <div class="wwBox" style="overflow:hidden ;">
        <div class="son" style="width:400%;">
            <div style="background: orange;" id="first">1</div>
            <div style="background: rgb(27, 235, 131);" id="second">2</div>
            <div style="background: rgb(69, 66, 255);" id="third">3</div>
            <div style="background: rgb(217, 255, 0);" id="four">4</div>
        </div>
    </div>
    <button onclick="ff()">
        点击跳转
    </button>
</div>
<script>
    function ff(){
        //点击按钮平滑滚动到此标签位置
        let box=document.getElementById('third');
        //锚点定位
        box.scrollIntoView();
        //平滑滚动 ：behavior:'smooth'
        box.scrollIntoView({behavior:'smooth'})
        //点击按钮平滑滚动到可视范围的垂直中间位置
        box.scrollIntoView({behavior:'smooth',block:'center'})

    }
</script>