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

 

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

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

html页面：

1
2
3
4
5
6
7
8
<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样式：

1
2
3
4
5
6
7
8
9
div {
           height: 800px;
           width: 400px;
           border: 2px solid black;
       }
  #container{
           position: fixed;
           margin:50px  500px;
 }

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

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

html页面：

1
2
3
4
5
6
7
8
<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代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<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)的地方。比较单一，且没有缓慢的效果

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

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

html页面：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<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代码如下：

1
2
3
4
5
6
[].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),前面是对象，通常原生的获取对象都是下面的写法：

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

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

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

需要滚动的时候加一个定时器：记住定时器的使用规则是先关后开；

js部分：

1
2
3
4
5
6
7
    return cPageView.extend({
            pageid: 10320608681,
            hpageid: 10320608681,
            events: {
                "click .nav_list li ": "setHightLight",
            },
})

点击事件部分：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
//设置标签选中，并且滚动到相应的位置
          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);
                  }
              }
          },

　看下效果如下所示：

　      

在chrome下测试和真机测试，效果都还行，这个需求主要是，没法通过高度来控制完成，因为，我们这个中间的内容元素都是动态加载进来的，高度是变得

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

如果大家还有更好的方法，欢迎给我留言哈！

 

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

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

html页面：

1
2
3
4
5
6
7
8
<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样式：

1
2
3
4
5
6
7
8
9
div {
           height: 800px;
           width: 400px;
           border: 2px solid black;
       }
  #container{
           position: fixed;
           margin:50px  500px;
 }

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

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

html页面：

1
2
3
4
5
6
7
8
<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代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<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)的地方。比较单一，且没有缓慢的效果

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

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

html页面：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<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代码如下：

1
2
3
4
5
6
[].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),前面是对象，通常原生的获取对象都是下面的写法：

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

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

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

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

js部分：

1
2
3
4
5
6
7
    return cPageView.extend({
            pageid: 10320608681,
            hpageid: 10320608681,
            events: {
                "click .nav_list li ": "setHightLight",
            },
})

点击事件部分：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
//设置标签选中，并且滚动到相应的位置
          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);
                  }
              }
          },

　看下效果如下所示：

　      

在chrome下测试和真机测试，效果都还行，这个需求主要是，没法通过高度来控制完成，因为，我们这个中间的内容元素都是动态加载进来的，高度是变得

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

如果大家还有更好的方法，欢迎给我留言哈！

　　

javascript------>(此文转发)的更多相关文章

  1. 《JavaScript闯关记》视频版硬广

    <JavaScript闯关记>视频版硬广 stone 在菜航工作时,兼任内部培训讲师,主要负责 JavaScript 基础培训,2016年整理的<JavaScript闯关记>课 ...

  2. JAVASCRIPT事件详解-------原生事件基础....

    javaScirpt事件详解-原生事件基础(一)   事件 JavaScript与HTML之间的交互是通过事件实现的.事件,就是文档或浏览器窗口中发生的一些特定的交互瞬间,通过监听特定事件的发生,你能 ...

  3. 【转】NativeScript的工作原理：用JavaScript调用原生API实现跨平台

    原文:https://blog.csdn.net/qq_21298703/article/details/44982547 -------------------------------------- ...

  4. js 的小效果---->选项卡

    js选项卡   <!doctype html> <html> <head> <meta charset="utf-8"> <t ...

  5. Jquery:小知识；

    Jquery:小知识: jQuery学习笔记(二):this相关问题及选择器   上一节的遗留问题,关于this的相关问题,先来解决一下. this的相关问题 this指代的是什么 这个应该是比较好理 ...

  6. web 小知识

    document.write和innerHTML的区别   document.write是直接写入到页面的内容流,如果在写之前没有调用document.open, 浏览器会自动调用open.每次写完关 ...

  7. 解决JNI native 线程不能正常退出的问题

    本人刚涉足学习C++ 安卓  java,遇到这个棘手的问题,多谢博客园作者lknlfy 看了你的博客解决了这个问题,此文转发, 方便日后学习 以下内容转自lknlfy作者博客  传送门:http:// ...

  8. 快看，那个学SLAM 的崩溃了!

    点"计算机视觉life"关注,置顶更快接收消息! 本文列举了当前优秀SLAM方案,点出了SLAM学习者的困境,最后打算搞点大事 请把此文转发给你认识的SLAM大神,愿你头发浓密,心 ...

  9. 被「李笑来老师」拉黑之「JavaScript微博自动转发的脚本」

    故事的背景如下图,李笑来 老师于10月19日在 知乎Live 开设 一小时建立终生受用的阅读操作系统 的讲座,他老人家看到大家伙报名踊跃,便在微博上发起了一个 猜数量赢取iPhone7 的活动. 因为 ...

  10. 转发！HTML 复选框 checkbox 的 JavaScript 的全选和全反选

    checkbox 或者按钮实现 form 内的 checkbox 全选或者反选,代码很简单,全部代码如下: <html> <head> <meta http-equiv= ...

随机推荐

  1. ACM第四站————最小生成树（克鲁斯卡尔算法）

    都是生成最小生成树,库鲁斯卡尔算法与普里姆算法的不同之处在于——库鲁斯卡尔算法的思想是以边为主,找权值最小的边生成最小生成树. 主要在于构建边集数组,然后不断寻找最小的边. 同样的题目:最小生成树 题 ...

  2. sql截断日志

    --收缩数据库 DBCC SHRINKDATABASE(fas) --截断事务日志: BACKUP LOG fas WITH NO_LOG 1.清空日志 DUMP TRANSACTION 库名 WIT ...

  3. initComponents()方法

    initComponents()是在使用GUI工具设计GUI界面时,NetBeans系统自动生成的方法. 其功能是在界面添加各个组件,并为它们注册监听器. 把initComponents()放在构造方 ...

  4. 2015-09-17 001 日志与对话框公用类_public

    using System;using System.Data;using System.Configuration;using System.Linq;using System.Web;using S ...

  5. 记一次SortedDictionary的不当使用

    起初想用SortedDictionary做游戏中的排行榜,代码如下: using UnityEngine; using System; using System.Collections; using ...

  6. JAVA基础知识之JVM-——URLClassLoader

    URLClassLoader是ClassLoader的一个实现类,它既能从本地加载二进制文件类,也可以从远程加载类. 它有两个构造函数, 即 URLClassLoader(URL[] urls),使用 ...

  7. lua中奇葩用法

    th> a=torch.zeros(,) [.0001s] th> a [torch.DoubleTensor of size 1x5] [.0002s] th> a[] [torc ...

  8. django下的ckeditor 5.0 文本编辑器上传功能。

    完整的后台界面怎么可以没有文本编辑器,但是django的admin界面很疑惑,没有自带文本编辑器,好在网上有不少成型的库可以用 我用的是ckeditor编辑器,安装和配置我引用别人的博客 这篇博客配置 ...

  9. Struts2的处理结果（二）——处理结果的类型

    Struts2的处理结果(二) --处理结果的类型 1.Struts2內建的支持的结果类型: 在<result>元素中的type属性,确定了结果类型. chain:Action链式处理的结 ...

  10. 2.建立exception包，建立Bank类，类中有变量double balance表示存款,Bank类的构造方法能增加存款，Bank类中有取款的发方法withDrawal(double dAmount),当取款的数额大于存款时,抛出InsufficientFundsException,取款数额为负数，抛出NagativeFundsException,

    public class Bank { Double qian=0.0; double newBank(double a) { qian=qian+a; return qian; } double w ...