滚动条滑动到指定位置

废话不多说直接代码：

css样式代码：

.scroll-layer{
width: 100%;
background: #fff;
position: fixed;
top: 0;
left: 0;
z-index: 1000;
}
.scroll-layer p{
height: 4rem;
line-height: 2rem;
font-size: 1.3rem;
padding-left: 10px;
}
.scroll-layer input{
height: 3rem;
line-height: 3rem;
border: 1px solid #eee;
width: 100%;
outline: none;
margin: 0;
padding: 0 0 0 1rem;
}
.scroll-layer button{
margin: 10px 10%;
width: 80%;
border: none;
outline: none;
background: lightblue;
color: #fff;
height: 3rem;
line-height: 3rem;
text-align: center;
font-size: 1.2rem;
}

html代码：

<div class="scroll-layer">     <p>能够输入的值：100,500,1000,1500,2000,2500,2652</p>     <input type="text" placeholder="输入滑动位置"/>     <button onclick="setScrollTop()">开始滑动</button></div>

jquery的js代码

$(function(){
var bodyHeight = $('html,body').height();
window.setScrollTop = function(){
var val = $('.scroll-layer').find('input').val();
bodyHeight >= val && $('html,body').animate({'scrollTop':val},1000);
        }
})

主要说一下注意事项：

1，由于位置是我们指定，所以需要用一个input输入，因此允许的输入值范围提示，输入框，触发事件按钮采用的是浮窗，漂浮在最顶部，类似一个导航。

2，输入的最大值不能超过html的高度，如果超过，不会执行滑动动画。

3，不设置的时候value值默认的为0

浮窗效果图：

还未上传，后期添加效果地址。