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


Posted in Javascript onNovember 05, 2016

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

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

<div id="container">
    <a href="#div1">div1</a>
    <a href="#div2">div2</a>
    <a href="#div3">div3</a>
</div>
  <div id="div1">div1</div>
  <div id="div2">div2</div>
  <div id="div3">div3</div>

css样式:

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

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

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

html页面:
  

<div id="container">
     <p id="p1">div1</p>
     <p id="p2">div2</p>
     <p id="p3">div3</p>
</div>
  <div id="div1">div1</div>
  <div id="div2">div2</div>
  <div id="div3">div3</div>

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

<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.0.min.js"></script>
$(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页面:
 

<ul>
    <li><a href="javascript:;" data-tab="eat">吃饭</a></li>
    <li><a href="javascript:;" data-tab="sleep">睡觉</a></li>
    <li><a href="javascript:;" data-tab="walk">逛街</a></li>
 </ul>
<div >
  <div data-tab="eat" style="background:cyan; height:500px;">
    吃饭
  </div>
  <div data-tab="sleep" style="background:lightgreen;height:2000px;">
    睡觉
  </div>
  <div data-tab="walk" style="background:LightSalmon;height:1000px;">
    逛街
  </div>
</div>

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 < items.length; i++) {
         var self = this;
         items[i].index = i;
         if (obj.index() == items[i].index) {
           items.each(function () {
             var currentItem = $(this);
             // items[i].scrollIntoView(false);     
             scrollMove(items[i].offsetTop-75, 500);
           });
           
           // console.log(items[i].index);
         }
       }
     },

看下效果如下所示:
JS控制div跳转到指定的位置的几种解决方案总结
在chrome下测试和真机测试,效果都还行,这个需求主要是,没法通过高度来控制完成,因为,我们这个中间的内容元素都是动态加载进来的,高度是变得

因此我通过控制它的index来控制,固定其div模块,距离顶部的高度top为75px,滚动单个的div模块,而不是整个的body一起滚动。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
由JavaScript中call()方法引发的对面向对象继承机制call的思考
Sep 12 Javascript
select标记美化--JS式插件、后期加载
Apr 01 Javascript
jQuery 1.9移除了$.browser可以使用$.support来替代
Sep 03 Javascript
jquery文档操作wrap()方法实例简述
Jan 10 Javascript
javascript中innerText和innerHTML属性用法实例分析
May 13 Javascript
javascript仿百度输入框提示自动下拉补全
Jan 07 Javascript
以WordPress为例讲解jQuery美化页面Title的方法
May 23 Javascript
javascript事件处理模型实例说明
May 31 Javascript
BootStrap 弹出层代码
Feb 09 Javascript
vue router自动判断左右翻页转场动画效果
Oct 10 Javascript
JavaScript和TypeScript中的void的具体使用
Sep 12 Javascript
Layui动态生成select下拉选择框不显示的解决方法
Sep 24 Javascript
xcode中获取js文件的路径方法(推荐)
Nov 05 #Javascript
在js里怎么实现Xcode里的callFuncN方法(详解)
Nov 05 #Javascript
jquery.Jcrop结合JAVA后台实现图片裁剪上传实例
Nov 05 #Javascript
JavaScript中绑定事件的三种方式及去除绑定
Nov 05 #Javascript
Ajax与服务器(JSON)通信实例代码
Nov 05 #Javascript
Javascript 普通函数和构造函数的区别
Nov 05 #Javascript
Javascript 函数的四种调用模式
Nov 05 #Javascript
You might like
利用php来自动调用不同服务器上的flash
2006/10/09 PHP
基于php和mysql的简单的dao类实现crud操作功能
2014/01/27 PHP
JS和jquery获取各种屏幕的宽度和高度的代码
2013/08/02 Javascript
js call方法详细介绍(js 的继承)
2013/11/18 Javascript
javascript中的throttle和debounce浅析
2014/06/06 Javascript
angularjs学习笔记之完整的项目结构
2015/09/26 Javascript
Javascript小技能总结(推荐)
2016/06/02 Javascript
AngularJS递归指令实现Tree View效果示例
2016/11/07 Javascript
js实现Tab选项卡切换效果
2020/07/17 Javascript
JavaScript体验异步更好的解决办法
2018/01/08 Javascript
jsonp跨域获取数据的基础教程
2018/07/01 Javascript
vue实例中data使用return包裹的方法
2018/08/27 Javascript
详解VUE前端按钮权限控制
2019/04/26 Javascript
Node.js 的 GC 机制详解
2019/06/03 Javascript
js 根据对象数组中的属性进行排序实现代码
2019/09/12 Javascript
angular8和ngrx8结合使用的步骤介绍
2019/12/01 Javascript
[06:04]DOTA2英雄梦之声Vol19卓尔游侠
2014/06/20 DOTA
[03:38]2014DOTA2西雅图国际邀请赛 VG战队巡礼
2014/07/07 DOTA
[24:42]VP vs TNC Supermajor小组赛B组 BO3 第三场 6.2
2018/06/03 DOTA
Python科学计算之NumPy入门教程
2017/01/15 Python
python脚本作为Windows服务启动代码详解
2018/02/11 Python
Tensorflow之Saver的用法详解
2018/04/23 Python
python3.7 sys模块的具体使用
2019/07/22 Python
详解python中*号的用法
2019/10/21 Python
Python Tornado实现WEB服务器Socket服务器共存并实现交互的方法
2020/05/26 Python
Python3与fastdfs分布式文件系统如何实现交互
2020/06/23 Python
使用HTML5的链接预取功能(link prefetching)给网站提速
2012/12/13 HTML / CSS
Dogeared官网:在美国手工制作的珠宝
2019/08/24 全球购物
客服主管岗位职责
2013/12/13 职场文书
科技开发中心办公室主任岗位责任制
2014/02/10 职场文书
省文明单位申报材料
2014/05/08 职场文书
模具专业求职信
2014/06/26 职场文书
春节慰问信范文
2015/02/15 职场文书
2015年房地产销售工作总结
2015/04/20 职场文书
拾金不昧表扬稿大全
2015/05/05 职场文书
教你怎么用python实现字符串转日期
2021/05/24 Python