js之滚动置顶效果

0、js获取高度

?


1

2

3

4

5

6

document.all   // 只有ie认识

document.body.clientHeight              // 文档的高，屏幕的文档区域的高

documemt.documentElement.clientHeight   // 有效的高，屏幕可视的高

document.documentElement.scrollHeight   // 屏幕的总高度

document.documentElement.scrollTop      // 滚动的高

1、首先，我们需要图片的支持，至少需要一张“置顶”的图片

2、然后，到网上找一张比较大的图片，到时直接多放几张到网页上就可模拟页面可滚动效果

?


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

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

<html>

<head>

    <style type="text/css">

    #scroll {

        width: 62px;

        height: 50px;

        right: 50px;

        bottom: 50px;

        display: none;

        cursor: pointer;

        position: fixed;

        background: url("goTop.png");

    }

    </style>

</head>

<body>

    <div>

        <img src="tangwei.jpg" />

        <img src="tangwei.jpg" />

        <img src="tangwei.jpg" />

        <img src="tangwei.jpg" />

        <img src="tangwei.jpg" />

        <img src="tangwei.jpg" />

        <img src="tangwei.jpg" />

        <img src="tangwei.jpg" />

        <img src="tangwei.jpg" />

        <img src="tangwei.jpg" />

        <img src="tangwei.jpg" />

        <img src="tangwei.jpg" />

        <img src="tangwei.jpg" />

        <img src="tangwei.jpg" />

        <img src="tangwei.jpg" />

    </div>

    <div id="scroll"></div>

</body>

<script type="text/javascript">

    // 获取置顶对象

    var obj = document.getElementById(‘scroll‘);

    // 置顶对象点击事件

    obj.onclick = function() {

        var timer = setInterval(function() {

            window.scrollBy(0, -50);

            if (document.body.scrollTop == 0) {

                clearInterval(timer);

            };

        }, 2);

    }

    // 窗口滚动检测

    window.onscroll = function() {

        obj.style.display = (document.body.scrollTop >= 300) ? "block" : "none";

    }

</script>

</html>

3、代码不多也不难，耐心一点都可以读懂，不规范的请忽略，效果图如下：

4、后来发现了几个问题

  1. ie6不支持 position:fixed; 所以置顶的图片会一直位于最底部；
  2. 按钮点击后，有些浏览器会有滚动置顶功能（谷歌，360，Opera等），而有些浏览器不支持 document.body.scrollTop（火狐，IE，Safari）

5、于是尝试解决，第一种问题可以直接用样式 css 来，而第二种则需要用 js，先来解决第一种，在网上有很多答案：

?


1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

*html{

    background-image:url(about:blank);

    background-attachment:fixed;

}

#scroll {

    width: 62px;

    height: 50px;

    right: 50px;

    bottom: 50px;

    cursor: pointer;

    position: fixed;

    display: none;

    background: url("goTop.png");

    /* 兼容ie6位置fixed问题 */

    _position:absolute;

    _bottom:auto;

    /*_top:expression(eval(document.documentElement.scrollTop));*/

    _top:expression(eval(document.documentElement.scrollTop+document.documentElement.clientHeight-this.offsetHeight-(parseInt(this.currentStyle.marginTop,10)||0)-(parseInt(this.currentStyle.marginBottom,10)||0)));

    _margin-bottom: 40px;

}

你会发现有下划线都是用来兼容 ie6 的，因为只有 ie6 不支持 position:fixed;

将元素固定在浏览器顶部用：

?


1

_top:expression(eval(document.documentElement.scrollTop));

将元素固定在浏览器底部用：

?


1

_top:expression(eval(document.documentElement.scrollTop+document.documentElement.clientHeight-this.offsetHeight-(parseInt(this.currentStyle.marginTop,10)||0)-(parseInt(this.currentStyle.marginBottom,10)||0)));

然后你再用 _margin-top:10px; 或 _margin-bottom:10px; 来修改位置。

6、第二种则是需要用到 js：

主要是滚动的高度在浏览器之间支持问题， document.body.scrollTop

因为： document.body.scrollTop 主要是谷歌浏览器，360浏览器，没DOCTYPE的ie等支持

document.documentElement.scrollTop 则是火狐浏览器，有DOCTYPE的ie浏览器支持

最麻烦的是苹果的Safari 竟然只对window.pageYOffset支持

于是可写成这样：

?


1

var scrollTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop；

7、整体的全部js代码是这样的：

?


1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

<script type="text/javascript">

    // 获取置顶对象

    var obj = document.getElementById(‘scroll‘);

    var scrollTop = null;

    // 置顶对象点击事件

    obj.onclick = function() {

        var timer = setInterval(function() {

            window.scrollBy(0, -100);

            if (scrollTop == 0) 

                clearInterval(timer);

        }, 2);

    }

    // 窗口滚动检测

    window.onscroll = function() {

        scrollTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop;

        obj.style.display = (scrollTop >= 300) ? "block" : "none";

    }

</script>
时间： 2024-10-03 04:10:41

js之滚动置顶效果的相关文章

鼠标滑动一定距离的左侧菜单置顶效果

如图:上述实现的是鼠标向下滑动90px,左侧菜单整体上移置顶,而菜单在最开始便进行了定位,距离顶部90px 以下为实现这个效果的js代码: /*鼠标滑动一定距离的菜单效果*/ $(document).scroll(function() { var top=$(this).scrollTop(); console.log(top); if(top>90) { $(".sidebar").css("top","0"); } if(top<

Android ListView标题置顶效果实现

一. 有图有真相     二.实现: 1. 基于ListView分类效果 2. TitleView即标题的处理(创建) 3. 处理TitleView的三种状态 三.源码: 例子下载 实现可以看代码,具体描述以后再添加. 转载请注明出处:http://blog.csdn.net/love_world_/article/details/8011101

微信小程序 导航tab切换，跟随滚动置顶

<view class="small_nav {{tabFixed?'small_navFix':''}}" id="tab-con"> <scroll-view scroll-x="true" scroll-left="{{scrollLeft}}"> <view class="small_nav_scroll"> <view class="{{id==

javascript平时小例子⑧(导航置顶效果)

<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></title> <style type="text/css"> *{ margin: 0;padding: 0; } .wrap{ width: 100%; height: 300px; position: relative; } .wrap .top{ wid

鼠标滚动,导航置顶.纯css3的position: sticky;

position: sticky; 这东西来自css3,并且瞬间就完成了置顶的效果. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> .a{ //定位头部置顶效果 top: 0; position: sticky; } .b{ //当纯的给个滚

自定义ScrollView，实现导航条悬浮置顶

Android ScrollView向上滑动控件顶部悬浮效果实现 * 导航栏实现悬浮置顶效果(顶部图片隐藏,下面的单选框导航悬浮) [上滑停靠顶端的悬浮框]里的实现方法是使用两个控件,滑动时,监听ScrollView的滚动Y值, * 从而通过对两个控件的显示隐藏来实现控件的顶部悬浮.但是实际应用场景中, * 有可能需要悬浮的控件里面的内容是比较多的,如果通过显示隐藏的方式来实现的话, * 操作控件里的内容时,需要重复定义两套变量,对控件里的内容进行修改时也是要操作再次,非常麻烦. 本文的方法是通

等高列布局、水平垂直居中与置顶页脚(转载)

等高列布局 在<八种创建等高列布局>一文中详细介绍了八种创建等高列布局的不同方法.可以说这些方法足以满足你的业务需求,当然其中有一些方法略为繁琐,也有时转得人头晕.在今天这种技术环境之下,如果的业务对IE低版本依赖性不是非常强的情况之下,可以考虑一些新的方法来实现.接下来我与大家一起探讨几种新方法实现等高列布局. Flexbox方式 Flexbox是一个强大而又神奇的CSS3模块,而且到现在,也得到众开浏览器的支持.有了这个模块,可以帮助我们做很多事情,而且较之以前的方案要更简单,唯一蛋疼的是

WinFrom窗体始终置顶

调用WindowsAPI使窗体始终保持置顶效果,不被其他窗体遮盖: [DllImport("user32.dll", CharSet = CharSet.Auto)] private static extern int SetWindowPos(IntPtr hWnd, int hWndInsertAfter, int x, int y, int Width, int Height, int flags); /// <summary> /// 得到当前活动的窗口 /// &

滚动的半圆效果

在线演示 本地下载 利用css3和js实现滚动的半圆效果,希望大家喜欢~