`

用Javascript实现回到顶部效果

阅读更多

用Javascript实现回到顶部效果

经常看到网页中有回到顶部的效果,今天也研究一下回到顶部有哪些方法。众所周知,用锚链接是实现回到最简单的方法,但是从用户体验效果来说,并不是最好的。(锚链接回到顶部时太快了,而且用户可能在看到某个感兴趣的东西想停下来,却停不下来),针对上面的缺点,我们试着用Javascript的方法来得到实现。思路是这个样子的:

1、首先用html和css构建基本的例子,代码如下

1
2
3
4
5
6
7
8
9
10
html部分:
        <div class="box">
            <img src="1.jpg"/>
        </div>
        <a href="javascript:;" id="btn" title="回到顶部"></a>
         
css部分:
        .box { width: 1190px; margin: 0 auto; }
        #btn{ width: 40px; height: 40px; background-color: red; position: fixed; right: 0px; bottom: 60px; background: url(2.jpg) no-repeat left top; }
        #btn:hover{ background: url(2.jpg) no-repeat left -40px; }

 在这里应该注意的是:href="javascript:;"的目的是为了阻止浏览器默认行为。

2、下面我们就可以用Javascript来控制我们的例子

  a、首先模仿锚链接回到顶部的效果,代码如下:

1
2
3
4
5
6
7
window.onload  = function(){
    var obtn = document.getElementById('btn');
    obtn.onclick = function(){             
        var osTop = document.documentElement.scrollTop || document.body.scrollTop;
        document.documentElement.scrollTop = document.body.scrollTop = -200;                       
    };
}

   这里的效果为,鼠标每点击一次,向上移动200像素(200像素是可以变化的),然后我们发现每次都要点击觉得很麻烦,这里我们不妨为它添加一个定时器函数

  b、添加定时器函数,代码如下:

1
2
var timer = null;//在前面声明
timer = setInterval(function(){},30);//里面接的是移动200px效果

   在这里,我们觉得还不是那么的好,比如说“别人家”的效果距离顶部越近的时候,速度越慢;并且我们中间还有一个问题就是回到顶部之后,在想继续往下看时不会继续往下了。

  c、清除定时器效果并控制回到顶部的速率,代码如下:

1
2
3
4
5
6
7
//改变回到顶部的速度
var isSpeed = Math.floor(-osTop/6)
document.documentElement.scrollTop = document.body.scrollTop = osTop + isSpeed;
//清除定时器效果
if(osTop == 0){
    clearInterval(timer);
}

   到这里,我们的效果差不多完成了,但是还是不能在滚动条滚动的时候,看到感兴趣的内容停下来。

  d、滚动条滚动即停,代码如下:

1
2
3
4
5
6
7
8
9
10
11
12
var isTop = true;//先声明
 
//滚动条滚动时触发             
window.onscroll = function(){
                     
    if(!isTop){
        clearInterval(timer);
    }
    isTop = false;
};
 
isTop = true;//添加在obtn.onclick事件的timer中

   到这里,我们还有一点小小的地方可以改动,就是当在可视窗口中,回到顶部是不出现的,到达一定值后才出现

  e、回到顶部的显示与隐藏,代码如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
/*在css中添加如下代码:*/
#btn{display: none;}
 
//获取页面的可视窗口高度
var clientHeight = document.documentElement.clientHeight || document.body.clientHeight;
 
/*在window.onscroll中添加如下代码,控制显示与隐藏*/
//在滚动的时候增加判断
var osTop = document.documentElement.scrollTop || document.body.scrollTop;//特别注意这句,忘了的话很容易出错
if (osTop >= clientHeight) {
    obtn.style.display = 'block';
}else{
    obtn.style.display = 'none';
}

   这样,回到顶部的效果就实现了,我们在看下完整的代码:

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
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Javascript 回到顶部效果</title>
        <style type="text/css">
            #btn {
                width: 40px;
                height: 40px;
                position: fixed;
                display: none;
                right: 0px;
                bottom: 30px;
                background: url(2.jpg) no-repeat left top;
            }
             
            #btn:hover {
                background: url(2.jpg) no-repeat 0 -40px;
            }
             
            .box {
                width: 1190px;
                margin: 0 auto;
            }
        </style>
    </head>
 
    <body>
        <div class="box">
            <img src="1.jpg" />
        </div>
        <a href="javascript:;" id="btn" title="回到顶部"></a>
                 
        <script type="text/javascript">
            window.onload = function() {
                var obtn = document.getElementById('btn');
                var timer = null;
                var isTop = true;
                //获取页面的可视窗口高度
                var clientHeight = document.documentElement.clientHeight || document.body.clientHeight;
 
                //滚动条滚动时触发
                window.onscroll = function(){
                    //在滚动的时候增加判断
                    var osTop = document.documentElement.scrollTop || document.body.scrollTop;//特别注意这句,忘了的话很容易出错
                    if (osTop >= clientHeight) {
                        obtn.style.display = 'block';
                    }else{
                        obtn.style.display = 'none';
                    }
 
                    if (!isTop) {
                        clearInterval(timer);
                    }
                    isTop = false;
                };
 
 
                btn.onclick = function(){
 
                    //设置定时器
                    timer = setInterval(function(){
                        //获取滚动条距离顶部的高度
                        var osTop = document.documentElement.scrollTop || document.body.scrollTop;  //同时兼容了ie和Chrome浏览器
                         
                        //减小的速度
                        var isSpeed = Math.floor(-osTop / 6);
                        document.documentElement.scrollTop = document.body.scrollTop = osTop + isSpeed;
                        //console.log( osTop + isSpeed);
 
                        isTop = true;
 
                        //判断,然后清除定时器
                        if (osTop == 0) {
                            clearInterval(timer);
                        }
                    },30);
                     
                     
                     
                };
            }
        </script>
    </body>
 
</html>

 

   到这里,还要小结一下,在中间我们运用的知识点:

1
2
3
4
5
6
7
8
9
10
11
12
13
知识点回顾:
 
DOM:
    1、document.getElementById()
    2、document.documentElement.scrollTop
    3、document.body.scrollTop
事件:
    1、window.onload
    2、window.onscroll
    3、obtn.onclick
定时器的使用:
    1、setInterval(function(){},30)
    2、clearInterval(timer)

 

分享到:
评论

相关推荐

    JavaScript回到顶部功能实现

    本文将详细介绍如何使用JavaScript实现这一功能。 首先,我们可以在HTML中创建一个"回到顶部"的按钮,通常将其设置为固定在页面底部或右下角,以便用户随时可见。按钮可以是简单的HTML元素,如`&lt;a&gt;`或`&lt;button&gt;`,...

    JavaScript实现tab栏切换效果

    JavaScript 实现的 Tab 切换效果是一种常见的网页交互设计,用于在不同的内容区域之间进行切换,通常用在页面顶部或侧边的导航菜单。在这个例子中,我们将详细讲解如何使用 JavaScript 和 CSS 实现这一功能。 首先...

    javascript 回到顶部效果的实现代码

    这可以通过JavaScript来实现,而本篇文章主要介绍了一种用JavaScript实现回到顶部效果的代码实现方法。以下是这篇文章中包含的知识点: 1. JavaScript实现回到顶部的基本原理: 实现回到顶部的效果,主要利用了...

    scrollTop原生JavaScript实现的回到顶部库

    本文将详细介绍如何使用原生JavaScript实现一个适应PC和移动设备,且兼容到IE7的"scrollTop"回到顶部库。 一、scrollTop属性 在JavaScript中,`scrollTop`属性用于获取或设置元素的垂直滚动位置。对于一个元素(如...

    jQuery实现回到顶部按钮效果

    在网页设计中,"回到顶部"功能是一种常见且实用的设计元素,它允许用户轻松地将浏览器窗口滚动回页面的顶部,而无需手动滚动。...只需少量代码,就能实现复杂的交互效果,如回到顶部按钮,大大提高了用户体验。

    回到顶部JavaScript插件

    4. **动画效果**:为了让用户点击按钮后平滑地回到顶部,可以使用`requestAnimationFrame`或者CSS3的`transition`属性来实现平滑滚动。原生JavaScript中,可以利用定时器(`setInterval`或`setTimeout`)配合改变`...

    js+css实现回到顶部按钮(back to top).docx

    通过本文,我们可以学习到使用JS和CSS实现回到顶部按钮的方法。这个功能可以在页面滚动时出现一个回到顶部的按钮,以便用户快速回到页面的顶部。 首先,我们需要在HTML中添加一个id为"back-to-top"的p元素,并在...

    Javascript返回顶部代码实现

    以上就是使用JavaScript实现返回顶部功能的主要步骤和涉及的知识点。这个简单但实用的功能可以通过自定义CSS样式和JavaScript逻辑进行扩展,以适应不同网站的设计需求。通过阅读和理解上述代码,你可以创建自己的...

    基于Javascript实现返回顶部按钮_.docx

    【基于Javascript实现返回顶部按钮】 在网页设计中,提高用户体验是一项关键任务,尤其是在内容丰富的页面上。当用户浏览到底部时,返回顶部的过程可能会显得不便。为了缓解这一问题,我们可以利用JavaScript来创建...

    回到顶部页面上下弹动效果

    在本案例中,我们关注的是一个特别的“回到顶部”实现,它带有页面上下弹动的动画效果。 这种弹动效果通常是通过JavaScript或者CSS3来实现的,增加了交互的趣味性与视觉吸引力。让我们详细探讨一下如何创建这样一个...

    回到顶部,纯javascript代码编写

    总结一下,纯JavaScript实现“回到顶部”功能主要涉及以下几个步骤: 1. 创建并定位“回到顶部”按钮。 2. 监听滚动事件,当达到设定阈值时显示按钮。 3. 为按钮添加点击事件监听器,实现平滑滚动到顶部。 4. 监听...

    jQuery实现返回顶部

    在网页设计中,"返回顶部"功能是一个常见且实用的设计元素,它允许用户快速地将浏览焦点移回页面顶部,特别是在长页面滚动时。本文将深入探讨如何利用jQuery这一强大的JavaScript库来实现这一功能。 首先,jQuery是...

    回到顶部 js 实现

    然后,我们使用JavaScript来监听滚动事件并根据页面位置控制“回到顶部”按钮的显示和隐藏。当用户向下滚动一定距离后,按钮显示;当用户向上滚动时,按钮隐藏。可以使用以下代码: ```javascript document....

    javascript实现回到顶部特效

    以上就是使用JavaScript实现“返回顶部”特效的主要步骤。这个功能不仅提高了用户体验,而且展示了JavaScript在网页交互中的强大能力。通过理解并实践这些知识点,开发者可以创建更多富有交互性的网页元素,提升网站...

    jquery实现回到顶部功能(带隐藏功能

    在这个主题中,我们将深入探讨如何使用jQuery这一流行的JavaScript库来实现这个功能,并且该功能还包含了一个隐藏按钮的设计。 首先,jQuery是一个强大的JavaScript库,它简化了DOM操作、事件处理、动画效果以及...

    用jQuery实现返回顶部滑动跳转效果

    本教程将详细讲解如何使用jQuery库来实现这种平滑的返回顶部的滑动跳转效果。 首先,jQuery是一个强大的JavaScript库,它简化了JavaScript的DOM操作,事件处理,动画以及Ajax交互。在这个效果中,jQuery的动画功能...

    jquery回到顶部效果

    回到顶部效果 #back-to-top { display: none; position: fixed; bottom: 20px; right: 30px; width: 50px; height: 50px; background-color: #333; color: #fff; text-align: center; line-height: 50...

    JavaScript基础返回页面顶部动画效果实例.rar

    这个“JavaScript基础返回页面顶部动画效果实例”旨在教你如何使用JavaScript实现这一功能,并且带有平滑的动画效果,使用户体验更加流畅。下面我们将深入探讨这个实例中的关键知识点。 首先,我们要了解JavaScript...

    jQuery实现简单而且很酷的返回顶部效果

    在网页设计中,提供一个“返回顶部”的功能是非常实用且用户体验友好的设计。...通过理解并应用上述代码,你可以根据自己的需求创造出各种独特的返回顶部效果。记住,优化用户体验始终是网页设计的核心目标之一。

    回到顶部的demo

    在网页开发中,实现“回到顶部”的方法多种多样,可以是JavaScript、jQuery或者其他前端框架如Vue或React等。从提供的描述来看,这个“超强的回到顶部demo”应该是一个可直接运行的示例,包含了完整的代码,适合...

Global site tag (gtag.js) - Google Analytics