460day（width和height方法，scrollTop与scrollLeft方法，小火箭返回顶部案例）

最新推荐文章于 2024-08-28 18:35:08 发布

orangecloudy

最新推荐文章于 2024-08-28 18:35:08 发布

阅读量221

点赞数

本文链接：https://blog.csdn.net/orangecloudy/article/details/85957438

版权

《2019年1月6日》【连续 460天】

标题：width和height方法，scrollTop与scrollLeft方法，小火箭返回顶部案例；
内容：

<body>
	<div>
	</div>
	<script src="js/jquery-1.12.4.js">
	</script>
	<script type="text/javascript">
		$(function () {
			// 获取div的宽度
			// console.log($('div').css('width'));
			// console.log($('div').width());

			// 修改div的宽度
			// $('div').css('width','400px');
			$('div').width(400);
		});
	</script>
</body>

// 需要获取页面可视区的宽度和高度
			$(window).resize(function(){
				console.log($(window).width());
				console.log($(window).height());
			});

console.log($('div').width()); //width
			console.log($('div').innerWidth()); //width+padding
			console.log($('div').outerWidth()); //width+padding+border
			console.log($('div').outerWidth(true)); //width+padding+border+margin

scrollTop与scrollLeft方法：

 $(window).scroll(function () {
      console.log($(window).scrollTop());
      console.log($(window).scrollLeft());
    });

小火箭返回顶部案例：

<style>
    body {
      height: 8000px;
    }
    
    a {
      color: #FFF;
    }
    
    .actGotop {
      position: fixed;
      bottom: 50px;
      right: 50px;
      width: 150px;
      height: 195px;
      display: none;
      z-index: 100;
    }
    
    .actGotop a, .actGotop a:link {
      width: 150px;
      height: 195px;
      display: inline-block;
      background: url(images/gotop.png) no-repeat;
      outline: none;
    }
    
    .actGotop a:hover {
      width: 150px;
      height: 195px;
      background: url(images/gotop.gif) no-repeat;
      outline: none;
    }
  </style>

  
</head>
<body>
<!-- 返回顶部小火箭 -->
<div class="actGotop"><a href="javascript:;" title="Top"></a></div>


<script src="jquery-1.12.4.js"></script>
<script>
  $(function () {
    
    //当页面超出去1000px的时候，让小火箭显示出来,如果小于1000，就让小火箭隐藏
    $(window).scroll(function () {
      if($(window).scrollTop() >= 1000 ){
        $(".actGotop").stop().fadeIn(1000);
      }else {
        $(".actGotop").stop().fadeOut(1000);
      }
    });
    
    
    //在外面注册
    $(".actGotop").click(function () {
      $("html,body").stop().animate({scrollTop:0},3000);
      //scrollTop为0
      //$(window).scrollTop(0);
    })
    
  });
</script>
</body>