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 TextArea动态显示剩余字符
Oct 22 Javascript
javascript Split方法,indexOf方法、lastIndexOf 方法和substring 方法
Mar 21 Javascript
jquery选择器(常用选择器说明)
Sep 28 Javascript
元素的内联事件处理函数的特殊作用域在各浏览器中存在差异
Jan 12 Javascript
Jquery实现三层遍历删除功能代码
Apr 23 Javascript
Javascript实现可旋转的圆圈实例代码
Aug 04 Javascript
JavaScript控制浏览器全屏及各种浏览器全屏模式的方法、属性和事件
Dec 20 Javascript
响应式框架Bootstrap栅格系统的实例
Dec 19 Javascript
jQuery实现基本隐藏与显示效果的方法详解
Sep 05 jQuery
微信小程序实现获取小程序码和二维码java接口开发
Mar 29 Javascript
js中Generator函数的深入讲解
Apr 07 Javascript
Node在Controller层进行数据校验的过程详解
Aug 28 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
免费的ip数据库淘宝IP地址库简介和PHP调用实例
2014/04/08 PHP
ThinkPHP表单自动验证实例
2014/10/13 PHP
php工具型代码之印章抠图
2018/07/18 PHP
laravel利用中间件防止未登录用户直接访问后台的方法
2019/09/30 PHP
jQuery 取值、赋值的基本方法整理
2014/03/31 Javascript
ext combobox动态加载数据库数据(附前后台)
2014/06/17 Javascript
node.js中的fs.chmodSync方法使用说明
2014/12/18 Javascript
实例代码详解jquery.slides.js
2015/11/16 Javascript
在Html中使用Requirejs进行模块化开发实例详解
2016/04/15 Javascript
完美实现八种js焦点轮播图(上篇)
2016/07/18 Javascript
jQuery实现可拖拽3D万花筒旋转特效
2017/01/03 Javascript
Bootstrap组合上、下拉框简单实现代码
2017/03/06 Javascript
angular 基于ng-messages的表单验证实例
2017/05/04 Javascript
JavaScript队列函数和异步执行详解
2017/06/19 Javascript
ui-router中使用ocLazyLoad和resolve的具体方法
2017/10/18 Javascript
微信小程序实现运动步数排行功能(可删除)
2018/07/05 Javascript
微信小程序缓存支持二次开发封装实现解析
2019/12/16 Javascript
从零学python系列之数据处理编程实例(二)
2014/05/22 Python
python基于multiprocessing的多进程创建方法
2015/06/04 Python
python合并同类型excel表格的方法
2018/04/01 Python
分析python请求数据
2018/08/19 Python
python交互界面的退出方法
2019/02/16 Python
爬虫代理池Python3WebSpider源代码测试过程解析
2019/12/20 Python
Python中的xlrd模块使用原理解析
2020/05/21 Python
python安装sklearn模块的方法详解
2020/11/28 Python
用css3写出气球样式的示例代码
2017/09/11 HTML / CSS
Html5实现单张、多张图片上传功能
2019/04/28 HTML / CSS
英国最大的运动营养公司之一:LA Muscle
2018/07/02 全球购物
Kiehl’s科颜氏西班牙官方网站:源自美国的植物护肤品牌
2020/02/22 全球购物
审计局班子四风对照检查材料思想汇报
2014/10/07 职场文书
2014年教育培训工作总结
2014/12/08 职场文书
比赛口号霸气押韵
2015/12/24 职场文书
银行求职信范文
2019/05/13 职场文书
干货分享:推荐信写作技巧!
2019/06/21 职场文书
Win10系统下配置Java环境变量
2021/06/13 Java/Android
Python制作一个随机抽奖小工具的实现
2021/07/07 Python