浏览器页面跳转到指定位置和图片懒加载

跳转到指定位置

	function tiaodong(){		
		$("html,body").animate({scrollTop:$("#qqq").offset().top},1000);
	}
	function tiaodong2(){
		$("html,body").animate({scrollTop:0},1000);		
	}

懒加载
1，引入jQuery库。

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

2，为需要延迟加载的图片设置data-src属性。

<img src="" data-src="image.jpg" alt="图片">

3，使用jQuery监听窗口滚动事件，检测可视区域内的图片，并将其data-src属性值赋给src属性，显示图片。

$(window).scroll(function() {
  $('img[data-src]').each(function() {
    if ($(this).offset().top < $(window).scrollTop() + $(window).height()) {
      $(this).attr('src', $(this).data('src')).removeAttr('data-src');
    }
  });
});

4，初始时需调用一次，以显示页面已经在可视区域内的图片。

$('img[data-src]').each(function() {
  if ($(this).offset().top < $(window).scrollTop() + $(window).height()) {
    $(this).attr('src', $(this).data('src')).removeAttr('data-src');
  }
});

内容渐入

$("#div3").fadeIn(3000);