js scrollTop到达指定位置!

很早之前就想分享这篇心得, 幸之今天能在这里完成, 好了, 话不多说, 进入正题 :

方法主要利用scrolltop值做运动, 用于到达用户指定的位置(如返回顶部把参数target设置为0即可),处理了多种情况如 scrolltop > 目标值 向上运动 ,等4种情况  , 代码及用法贴上,

goTo = function(target){
				var scrollT = document.body.scrollTop|| document.documentElement.scrollTop
				if (scrollT >target) {
					var timer = setInterval(function(){
						var scrollT = document.body.scrollTop|| document.documentElement.scrollTop
						var step = Math.floor(-scrollT/6);
						document.documentElement.scrollTop = document.body.scrollTop = step + scrollT;
						if(scrollT <= target){
							document.body.scrollTop = document.documentElement.scrollTop = target;
							clearTimeout(timer);
						}
					},20)
				}else if(scrollT == 0){
					var timer = setInterval(function(){
						var scrollT = document.body.scrollTop|| document.documentElement.scrollTop
						var step = Math.floor(300/3*0.7);
						document.documentElement.scrollTop = document.body.scrollTop = step + scrollT;
						console.log(scrollT)
						if(scrollT >= target){
							document.body.scrollTop = document.documentElement.scrollTop = target;
							clearTimeout(timer);
						}
					},20)
				}else if(scrollT < target){
					var timer = setInterval(function(){
						var scrollT = document.body.scrollTop|| document.documentElement.scrollTop
						var step = Math.floor(scrollT/6);
						document.documentElement.scrollTop = document.body.scrollTop = step + scrollT;
						if(scrollT >= target){
							document.body.scrollTop = document.documentElement.scrollTop = target;
							clearTimeout(timer);
						}
					},20)
				}else if(target == scrollT){
					return false;
				}
			}

  用法 function(target) / / 目前唯一target(目标距离number)  ,

on(goPs,‘click‘,function(){ goTo(2450) }); //运动到scrolltop值为2450地位置,下面也一样, 运动到指定的位置
on(goJob,‘click‘,function(){ goTo(3373) })
on(goTel,‘click‘,function(){ buffer.goTo(3373) })
on(goMe,‘click‘,function(){ buffer.goTo(1539) })
on(goHome,‘click‘,function(){ buffer.goTo(0) });
on(scrollgoOne,‘click‘,function(){ buffer.goTo(2450) });
on(scrollgoPc,‘click‘,function(){ buffer.goTo(2450) });
on(scrollJob,‘click‘,function(){ buffer.goTo(3373) });
on(scrollMe,‘click‘,function(){ buffer.goTo(1539) });
on(goTop,‘click‘,function(){ buffer.goTo(0) })
时间: 2024-10-17 13:23:36

js scrollTop到达指定位置!的相关文章

js滚动到指定位置导航栏固定顶部

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>js滚动到指定位置导航栏固定顶部</title> <style type="text/css"> body{height: 2500px; margin: 0; padding: 0;} .banner{height: 250px; width: 100%; bac

js 定位到指定位置

 <script>    //滚动定位到product         function scroll() {             var scroll_offset = $("#product").offset();             $("body,html").animate({                 scrollTop: scroll_offset.top             }, 0);         } </s

如何跳转到另一个页面的指定位置

如何跳转到另一个页面的指定位置:在同一个页面中,点击一个地方跳转到指定的位置这个很简单,就是使用的锚点,例如: <a href="#thediv">蚂蚁部落</a> 以上代码,当点击a元素的时候能够跳转到id属性值为thediv的元素.上面介绍的是在同一个页面的情况,如果是不同的页面当然也是可以进行这样的定位的,只要在前面加上链接即可: <a href="mytest.aspx#thediv">蚂蚁部落</a> 以上代

js-滚动到指定位置导航栏固定顶部

最近整理一下之前做的一个项目,把滚动条动态固定顶部的代码整理出来和大家分享,上代码 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>js滚动到指定位置导航栏固定顶部</title> 6 <style type="text/css"> 7 body{height: 2500px; margin:

js,jquery滚动/跳转页面到指定位置

要解决两个需求: 一个是从A页面跳到B页面,滚动到页面的任何地方: 第二个是在B页面内部点击某个元素,滚动到页面的任何地方: 怎么解决啊?很简单,当然是用锚点. 首先在A页面创建一个锚点 <body> <a href="b.html#pos" target="_blank">点击跳转</a> <body> 然后在B页面定义这个锚点 <body> ... 这里是很多文字,把页面撑开,撑出滚动条 ... <

js 页面滚动到指定位置

项目中,本来想通过点击左侧列表让页面进行快速导航(根据 id="item" 和 a标签的 href 属性[<a href="#item"></a>]),不过滚动后的页面一直是顶在浏览器页面顶部的,不符合项目需求,所以就通过 js 代码让页面进行指定位置滚动,代码如下: $(".left_nav>ul>li").click(function () { var n = parseInt($(this)[0].id)

JS无限添加HTML到指定位置

用JS把HTML添加到指定位置有两种写法,一种是用字符串,一种是用javascript中的方法 第一种: 用字符串写 <h2>利用JS无限添加一个相同部分</h2> <h5>第一种写法</h5> <%--有多少个相同的这里面的值就是几--%> <asp:HiddenField ID="hfCount" runat="server" Value="-1" /> <%--每

js将滚动条滚动到指定位置的方法

代码如下(主要是通过设置Location的hash属性): <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <

如何在JS数组特定索引处指定位置插入元素?

需求: 将一个元素插入到现有数组的特定索引处.听起来很容易和常见,但需要一点时间来研究它. // 原来的数组var array = ["one", "two", "four"];// splice(position, numberOfItemsToRemove, item)// 拼接函数(索引位置, 要删除元素的数量, 元素)array.splice(2, 0, "three"); // www.jbxue.comarray;