>

引用js文件即可,jquery网页回到顶部效果

- 编辑:正版管家婆马报彩图 -

引用js文件即可,jquery网页回到顶部效果

啊,进来开拓供给,当网页内容草鸡多的时候,客户就须求有个按键神速回到顶上部分,并不是和睦去滚滑轮~

啊,进来开辟须求,当网页内容草鸡多的时候,客户就要求有个开关火速回到最上端,并不是谐和去滚滑轮~

原先感觉相比难的说,因为下面需要全副用js来落到实处,哪个页面引用,哪个页面彰显。

原本以为相比较难的说,因为上边要求全副用js来促成,哪个页面援用,哪个页面展现。

于是乎,本土冒就尝试写了下,唔,没开采,还挺easy的说~~

于是,本土憋就尝试写了下,唔,没觉察,还挺easy的说~~

有屁作者就快放了,直接上代码,屁放多了就成屎了哦,罪过,阿弥陀佛,阿门

有屁作者就快放了,直接上代码,屁放多了就成屎了哦,罪过,阿弥陀佛,阿门

$(function(){
 var $btn_top = $('');
 $btn_top.css("display","none");
 $btn_top.css("width","40px");
 $btn_top.css("height","40px");
 $btn_top.css("position","fixed");
 $btn_top.css("right","20px");
 $btn_top.css("bottom","100px");
 $btn_top.css("z-index","990");
 $("body").append($btn_top);
 $("body").on("click","#scrollTop",function(){
  $("html,body").animate({scrollTop: 0},"slow");
 });
 if($(window).scrollTop() > 100){
  $("#scrollTop").fadeIn(600);
 }
 $(window).scroll(function(){
  if($(window).scrollTop() > 100){
   $("#scrollTop").fadeIn(600);
  }else{
   $("#scrollTop").fadeOut(600);
  }
 });
});

复制代码 代码如下:

图形本人找个就好啊,作者这里用的是相对路线“

<pre name="code" class="javascript">//回到顶端js
$(function(){
var $btn_top = $('<a id="scrollTopBtn"><img src="css/web/images/scrollTop.png"></a>');
$btn_top.css({
'display':'none',
'width':'40px',
'height':'40px',
'position':'fixed',
'right':'20px',
'bottom':'100px',
'z-index':'999'
});
$("body").append($btn_top);
$("body").on("click","#scrollTopBtn",function(){
$("html,body").animate({scrollTop: 0},"slow");
});
var $btn = $("#scrollTopBtn");
if($(window).scrollTop() > 100){
$btn.fadeIn(600);
}
$(window).scroll(function(){
if($(window).scrollTop() > 100){
$btn.fadeIn(600);
}else{
$btn.fadeOut(600);
}
});
});

平素在第四行和第五行改下大小就能够,那样就防止了页面增多猫标签~~(>^ω^

图表本身找个就好啊,笔者那边用的是相对路径“css/web/images/scrollTop.png”

存成js文件,直接援引,哪疼用哪,何人用哪个人知道~~~

直白在第五行和第六行改下大小就可以,这样就防止了页面增多猫标签(>^ω^<)喵~

有交换请加QQ:1740437,招待指教~~

存成js文件,直接援用,哪疼用哪,什么人用何人知道~~~

另寻求有趣的事中的古风爱好小同伴,以及民族音乐爱好小同伙,恐怕拍戏摄像微电影小同伴~~

你恐怕感兴趣的篇章:

  • jquery落成的动态回到顶端特效代码
  • jQuery回到最上部的代码
  • jquery落成点击页面回到最上部
  • jQuery达成带有动画效果的归来顶端和背后部分代码
  • jQuery达成分章节锚点“回到最上端”动画特效代码
  • jquery完毕跳到底层,回到顶上部分效应的简约实例(类似锚)
  • 怎么选择JQuery完成从尾部回到顶上部分的作用
  • js+JQuery重返顶上部分功用怎么样贯彻
  • jQuery 最上端导航跟随滚动条滚动固定浮动在顶端
  • jquery实现牢固顶端导航成效(仿寸菇街)
  • jQuery完结轻松的回来最上部totop效用示例

原来感到比较难的说,因为上头...

本文由web前端发布,转载请注明来源:引用js文件即可,jquery网页回到顶部效果