js完结漂浮回最上端开关实例,javascript轻松完毕

时间:2019-08-30 15:04来源:2020欧洲杯冠军竞猜官方网站
js实现漂浮回顶端按键实例   那篇小说首要介绍了js达成漂浮回最上端按键的方法,实例分析了javascript完结再次回到顶上部分成效的样式与动态完毕工夫,特别富有实用价值,必要的心上人

js实现漂浮回顶端按键实例

   那篇小说首要介绍了js达成漂浮回最上端按键的方法,实例分析了javascript完结再次回到顶上部分成效的样式与动态完毕工夫,特别富有实用价值,必要的心上人能够参见下

  ?

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>漂浮回顶部按钮</title>

<style>

body{

height:2000px;

}

.rTop{

width:100px; height:25px;

text-align:center; font-size:small;

line-height:25px; border:1px solid #999;

position:fixed; right:0; bottom:0;

border-bottom-color:#333;

border-right-color:#333; margin:5px;

cursor:pointer; display:none

}

</style>

<script>

<!--拖动滚动条或滚动鼠标轮-->

window.onscroll=function(){

if(document.body.scrollTop||document.documentElement.scrollTop>0){

document.getElementById('rTop').style.display="block"

}else{

document.getElementById('rTop').style.display="none"

}

}

<!--点击“回到顶部”按钮-->

function toTop(){

window.scrollTo('0','0');

document.getElementById('rTop').style.display="none"

}

</script>

</head>

<body>

<div class="rTop" id="rTop" onClick="toTop()">返回顶部</div>

<h1>顶部</h1>

<h1>测试</h1><p></p><h1>测试</h1><p></p><h1>测试</h1><p></p>

<h1>测试</h1><p></p><h1>测试</h1><p></p><h1>测试</h1><p></p>

<h1>测试</h1><p></p><h1>测试</h1><p></p><h1>测试</h1><p></p>

<h1>测试</h1><p></p><h1>测试</h1><p></p><h1>测试</h1><p></p>

<h1>测试</h1><p></p><h1>测试</h1><p></p><h1>测试</h1><p></p>

<h1>测试</h1><p></p><h1>测试</h1><p></p><h1>测试</h1><p></p>

<h1>测试</h1><p></p><h1>测试</h1><p></p><h1>测试</h1><p></p>

<h1>底部</h1>

</body>

</html>

  希望本文所述对大家的javascript程序设计有所协助。

        注< >*2020欧洲杯冠军竞猜官方网站 ,*:更多优质教程请关切帮客之家编制程序**

那篇小说主要介绍了js实现漂浮回最上部按键的点子,实例分析了javascript完毕再次回到最上端功用的体裁与动态达成能力...

正文实例陈说了javascript不难达成跟随滚动条漂浮的回来最上部按键效果。分享给大家供我们参照他事他说加以考察,具体如下:

话相当的少说,请看实例

正如不错的一款超越一屏中度才呈现的,跟随滚动条漂浮的归来最上端按键特效代码。

1、HTML结构

运行效果如下图所示:

<div class="return_top"></div>

2020欧洲杯冠军竞猜官方网站 1

2、css样式

整体实例代码如下:

.return_top{ 
  width: 50px; 
  height: 50px; 
  background: url(../images/lanren.gif) no-repeat center #FF8D16; 
  position:fixed; 
  right: 30px; 
  bottom: 30px; 
  display: none; 
  cursor: pointer; 
  z-index: 99;
}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>test</title>
<style>
body{ height:2000px;}
.rTop{ width:100px; height:25px; text-align:center; font-size:small; line-height:25px; border:1px solid #999; position:fixed; right:0; bottom:0;
border-bottom-color:#333; border-right-color:#333; margin:5px; cursor:pointer; display:none}
</style>
</head>
<body>
<div class="rTop" id="rTop">返回顶部</div>
<script>
 window.onscroll=function(){
 if(document.body.scrollTop||document.documentElement.scrollTop>0){
 document.getElementById('rTop').style.display="block"
 }else{
 document.getElementById('rTop').style.display="none"
 }
 }
</script>
</body>
</html>

3、js效果

更加多关于JavaScript相关内容感兴趣的读者可查阅本站专项论题:《JavaScript切换特效与技巧总计》、《JavaScript查找算法本事计算》、《JavaScript动画特效与技巧汇总》、《JavaScript错误与调解才干计算》、《JavaScript数据结构与算法技术总计》、《JavaScript遍历算法与技艺计算》及《JavaScript数学生运动算用法计算》

<script>
   $(function(){
    $(window).scroll(function(){
      var topDistance=$(window).scrollTop();  //获取鼠标在本窗口现有状态下移动的高度
      if(topDistance>100){  //如果移动高度大于100px,顶部图标单单显示出,如果移动高度小于等于100,顶部图标不显示
        $('.return_top').fadeIn(800);
      }else{
        $('.return_top').fadeOut(800);
      }
    });
    $('.return_top').on('click',function(){
      $('html,body').animate({scrollTop:0},800); //必须用$('html,body')选择,不然没效果
    })
  });
</script>

企望本文所述对大家JavaScript程序设计具备协理。

以上就是本文的全体内容,希望本文的故事情节对大家的就学或然干活能推动一定的推来推去,相同的时间也可望多多扶助脚本之家!

你大概感兴趣的文章:

  • js JQuery再次回到顶端功效怎么着达成
  • 贰个简短的弹性重回顶端JS代码达成介绍
  • javascript再次回到顶端职能(自写代码)
  • js轻便的点击重回最上端效果与利益达成格局
  • jQuery达成重回最上部成效适合不帮助js的浏览器
  • javascript兑现搜狐页面右下角再次回到顶上部分开关
  • js再次回到最上端实例分享
  • 原生js完成再次回到最上部缓冲成效
  • js完成重返顶上部分效应
  • JS再次来到顶上部分实例代码

您大概感兴趣的稿子:

  • js JQuery重回最上端功用怎样兑现
  • 四个大约的弹性重临顶上部分JS代码达成介绍
  • javascript重返最上部遵守(自写代码)
  • js轻便的点击重临顶上部分意义落实格局
  • jQuery完毕再次回到顶端成效适合不补助js的浏览器
  • javascript贯彻今日头条页面右下角重返最上部按键
  • javascript简单实现跟随滚动条漂浮的回来最上部按键效果
  • 原生js落成重临最上端缓冲功能
  • js达成重返顶端功用
  • JS重临最上端实例代码

编辑:2020欧洲杯冠军竞猜官方网站 本文来源:js完结漂浮回最上端开关实例,javascript轻松完毕

关键词: 欧洲杯竞猜