回到顶部代码(回到顶部html代码)

张工 2022-06-28 21:00:47 阅读:33
  

  一、需求分析

  当用户浏览的网页过长时,当用户浏览到网页底部又想回到顶部时,需要多次滚动才能回到顶部,不仅麻烦,而且导致用户体验差。如今,大多数页面都有一个按钮固定在页面顶部或页面可见区域的某个地方。点击它可以让页面回到顶部,用户再也不用滚动滚轮了。以下返回本站顶部的效果分享给大家:


Jquery实现一键返回顶部


  Jquery

  第二,示例代码

  HTML代码:

  !-回到起点-

  div id='返回顶部' i /i/div

  !-回到顶端-

  CSS代码

  #回到顶部{

  宽度: 50px;

  height: 50px

  位置:固定;

  right: 50px

  底部: 25%;

  背景色: # FFF;

  cursor:指针;

  显示:无;

  }

  #重回巅峰。layui-icon {

  font-size : 50px;

  color: # 333

  }

  Jquery代码:

  //返回顶部

  window.onscroll=function() {

  scroll top=document . document element . scroll top | | window . page yo offset | | document . body . scroll top;

  $(' #回到顶部')。css('display ',(scrollTop=300)?block ' : ' none ');

  };

  $(' #回到顶部')。单击(函数(){

  var timer=setInterval(function(){

  window.scrollBy(0,-450);

  if (scrollTop==0)

  clearInterval(定时器);

  }, 50);

  });

  记得分享好文章!

二维码