欢迎光临
我们一直在努力

简单的js网站按钮缓冲置顶特效滚动返回顶部代码实例

简单的js慢速滚动返回顶部代码实例

HTML代码:

<! ---可这是图片或文字--->
<div class="top">
    <a href=""><img src="./images/top.png"></a>
</div>

css:

/*top*/
.top{
    width:60px;
    height: 60px;
    position: fixed;
    right:20px;
    bottom:100px;
    display: none;
}

JS代码如下:

 

  /////top
  $(window).scroll(function(){
	  if($(window).scrollTop()>800){
		  $('.top').css('display','block')
	  }else{
		  $('.top').css('display','none')
	  }
  })
  
  $('.top').click(function(){
	  
	  $('body,tml').animate({
		scrollTop:0  
	  },500)
	  
  })
  
  
});

 

ps:注意 if($(window).scrollTop()>800)这句话的意思是当浏览器到一定的高度的时候显示图标,否则隐藏。500是我们速度可以修改,看大家的需求。

[v_error]$(‘body,tml’).animate({这里的tml记得修改成html,因为小编再用HTML的时候再前端会显示本博的其他链接页面,所以大家一定要即可修改,否则可能导致不能使用。[/v_error]

 

赞(0) 打赏
未经允许不得转载:新起点博客 » 简单的js网站按钮缓冲置顶特效滚动返回顶部代码实例


关注公众号『新起点软件管家』

获取最新网络资源及破解软件!
带你玩转各样软件...

评论 3

评论前必须登录!

 

  1. #-19

    [赞]

    共享资源网4年前 (2020-06-17)

觉得文章有用就打赏一下文章作者

非常感谢你的打赏,我们将继续给力更多优质内容,让我们一起创建更加美好的网络世界!

支付宝扫一扫打赏

微信扫一扫打赏