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 相关文章推荐
基于JQuery的抓取博客园首页RSS的代码
Dec 01 Javascript
Javascript保存网页为图片借助于html2canvas库实现
Sep 05 Javascript
jQuery实现手机号码输入提示功能实例
Apr 30 Javascript
在Node.js应用中读写Redis数据库的简单方法
Jun 30 Javascript
Bootstrap每天必学之按钮(一)
Nov 24 Javascript
详解JavaScript权威指南之对象
Sep 27 Javascript
微信小程序 火车票查询实例讲解
Oct 17 Javascript
实例浅析js的this
Dec 11 Javascript
jQuery查找和过滤_动力节点节点Java学院整理
Jul 04 jQuery
vue2.0 datepicker使用方法
Feb 04 Javascript
函数式编程入门实践(一)
Apr 20 Javascript
前端Electron新手入门教程详解
Jun 21 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发送post请求函数分享
2014/03/06 PHP
php实现zip文件解压操作
2015/11/03 PHP
如何在centos8自定义目录安装php7.3
2019/11/28 PHP
js 弹出框只弹一次(二次修改之后的)
2013/11/26 Javascript
ECMAScript 6即将带给我们新的数组操作方法前瞻
2015/01/06 Javascript
javascript图片预加载完整实例
2015/12/10 Javascript
Bootstrap入门书籍之(一)排版
2016/02/17 Javascript
jQuery获取当前点击的对象元素(实现代码)
2016/05/19 Javascript
jQuery基本选择器(实例及表单域value的获取方法)
2016/05/20 Javascript
JS &amp; JQuery 动态添加 select option
2016/06/08 Javascript
jQuery+CSS实现的table表格行列转置功能示例
2018/01/08 jQuery
JavaScript设计模式之原型模式分析【ES5与ES6】
2018/07/26 Javascript
Vue中 key keep-alive的实现原理
2018/09/18 Javascript
JavaScript中将值转换为字符串的五种方法总结
2019/06/06 Javascript
vue中keep-alive内置组件缓存的实例代码
2020/04/16 Javascript
[04:10]2016国际邀请赛中国区预选赛第二日TOP10精彩集锦
2016/06/28 DOTA
python实现封装得到virustotal扫描结果
2014/10/05 Python
python的类方法和静态方法
2014/12/13 Python
Python中的CSV文件使用&quot;with&quot;语句的方式详解
2018/10/16 Python
python读取word文档,插入mysql数据库的示例代码
2018/11/07 Python
python+ffmpeg批量去视频开头的方法
2019/01/09 Python
spark dataframe 将一列展开,把该列所有值都变成新列的方法
2019/01/29 Python
python实现nao机器人手臂动作控制
2019/04/29 Python
python-OpenCV 实现将数组转换成灰度图和彩图
2020/01/09 Python
TensorFlow设置日志级别的几种方式小结
2020/02/04 Python
Python3 io文本及原始流I/O工具用法详解
2020/03/23 Python
使用matlab 判断两个矩阵是否相等的实例
2020/05/11 Python
基于tf.shape(tensor)和tensor.shape()的区别说明
2020/06/30 Python
Python脚本打包成可执行文件过程解析
2020/10/20 Python
Carter’s OshKosh加拿大:购买婴幼儿服装和童装
2018/11/27 全球购物
Oracle性能调优原则
2012/05/03 面试题
网络优化专员求职信
2014/05/04 职场文书
升职自我推荐信范文
2015/03/25 职场文书
2015年文明创建工作总结
2015/04/30 职场文书
费用申请报告范文
2015/05/15 职场文书
2020年基层司法所建设情况调研报告
2019/11/30 职场文书