JS控制div跳转到指定的位置的几种解决方案总结

时间: 作者:约且

  

[js跳转页面到指定,div,js跳转到页面指定位置]JS控制div跳转到指定的位置的几种解决方案总结

  

总结一下自己在写这个需求遇到的问题,相信大家应该是经常遇到的。即要求滚轮滚动到指定的位置。先看下基本的解决方案。

  

  

1.给链接a加个#的方式来实现跳转。(锚点方法)这里直接贴下代码:  
  

  
  
  
  div1  div2  div3  
  
div1
  
div2
  
div3
  
  
  

css样式:  
  

  
  
  div {  height: 800px;  width: 400px;  border: 2px solid black;  }  #container{  position: fixed;  margin:50px 500px;  }
  
  

该锚点法,不需要任何的js代码,即可实现跳转的方法。缺点:点击链接url发生变化,刷新的话会有问题。此方法貌似只能在.html后缀的页面才能起作用,对于.cshtml页面不起作用。

  

  

2.用animate属性,当点击锚点后,页面滚动到相应的DIV。接着上面的代码,具体添加如下代码:  

  

html页面:  
  

  
  
  
  

div1

  

div2

  

div3

  
  
div1
  
div2
  
div3
  
  
  

css样式页面同上,看下js代码如下:  
  

  
  
  $(document).ready(function() {  $("#p1").click(function() {  $("html, body").animate({  scrollTop: $("#div1").offset().top }, {duration: 500,easing: "swing"});  return false;  });  $("#p2").click(function() {  $("html, body").animate({  scrollTop: $("#div2").offset().top }, {duration: 500,easing: "swing"});  return false;  });  $("#p3").click(function() {  $("html, body").animate({  scrollTop: $("#div3").offset().top }, {duration: 500,easing: "swing"});  return false;  });  });  
  
  

3.简单的window.scrollTo方法使用,这里不再详细说,看下用法。

  

  

即滚动到坐标为(100,500)的地方。比较单一,且没有缓慢的效果  
  

  
  
  function scrollWindow(){  window.scrollTo(100,500);  }  
  
  

4.用js的srollIntoView方法进行使用。这里贴下代码:  

  

html页面:  
  

  
  
  
      
  • 吃饭
  •   
  • 睡觉
  •   
  • 逛街
  •   
  
  
  吃饭  
  
  睡觉  
  
  逛街  
  
  
  
  

js代码如下:  
汇盛国际平台  

  
  
  [].slice.call(document.querySelectorAll('a')).forEach(function(el){  el.addEventListener('click', function(){  var target = document.querySelector('div[data-tab=' + this.getAttribute('data-tab')+ ']' )  target.scrollIntoView(true);  })  })
  
  

注意一个问题,object.scrollIntoView(bool),前面是对象,通常原生的获取对象都是下面的写法:  
  

  
  
  document.getElementById('#xxx' ).scrollIntoView(true);
  
  

那么如果用jquery来调用该方法的话,需要写成下面这样的:  
  

  
  
  $('#xxx')[0].scrollIntoView(true);
  
  

5.如果需要缓慢的移动滚动可添加一个定时器。看下我们这个需求。先贴下代码:  

  

js部分:  
  

  
  
  return cPageView.extend({  pageid: 10320608681,  hpageid: 10320608681,  events: {  "click .nav_list li ": "setHightLight",  },  })  
  
  

点击事件部分:  
  

  
  
  //设置标签选中,并且滚动到相应的位置  setHightLight: function (e) {  var obj = $(e.currentTarget);  var _tag = this.$el.find('.nav_list li');  var $innerText = this.$el.find('.fsp_hd');  var items = $(".fs_prd_wrap").find('.item');  this.$el.find('.nav_list li').removeClass('current');  var itemIndex = "";  var objCurrent = [];  obj.addClass('current');  var scrollMove = function (scrollTo, time) {  var scrollFrom = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;  var count = 0;  var every = 10;  scrollTo = parseInt(scrollTo);  time /= every;  var interval = setInterval(function () {  count++;  document.documentElement.scrollTop = document.body.scrollTop = (scrollTo - scrollFrom) / time * count + scrollFrom;  if (count >= time) {  clearInterval(interval);  }  }, every);  };  for (var i = 0; i 
                    
(责任编辑:admin)
				

推荐图片Related

相关文章Related

查看更多热门新闻


首页 | 特效插件 | 常用代码 | 样式素材 | 脚本代码 | css特效

Copyright © 2017-2018 汇盛国际 版权所有

系统要求:本站自适应各终端浏览器分辨率

请使用Google、Firefox、IE9、百度浏览器登录网站

网站地图 | RSS订阅 | 汇盛国际平台