滚动条滑动到指定位置

废话不多说直接代码：

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

浮窗效果图：

效果地址：https://rattenking.github.io/demo/04/index.html

其他

[我的博客，欢迎交流！](http://rattenking.gitee.io/stone/index.html)

[我的CSDN博客，欢迎交流！](https://blog.csdn.net/m0_38082783)

[微信小程序专栏](https://blog.csdn.net/column/details/18335.html)

[前端笔记专栏](https://blog.csdn.net/column/details/18321.html)

[微信小程序实现部分高德地图功能的DEMO下载](http://download.csdn.net/download/m0_38082783/10244082)

[微信小程序实现MUI的部分效果的DEMO下载](http://download.csdn.net/download/m0_38082783/10196944)

[微信小程序实现MUI的GIT项目地址](https://github.com/Rattenking/WXTUI-DEMO)

[微信小程序实例列表](http://blog.csdn.net/m0_38082783/article/details/78853722)

[前端笔记列表](http://blog.csdn.net/m0_38082783/article/details/79208205)

[游戏列表](http://blog.csdn.net/m0_38082783/article/details/79035621)