返回顶部php代码,页面按需返回顶部代码及注释说明

JS代码

function gotoTop(min_height){

//预定义返回顶部的html代码，它的css样式默认为不显示

var gotoTop_html = '

返回顶部

//将返回顶部的html代码插入页面上id为page的元素的末尾

$("#page").append(gotoTop_html);

$("#gotoTop").click(//定义返回顶部点击向上滚动的动画

function(){$('html,body').animate({scrollTop:0},700);

}).hover(//为返回顶部增加鼠标进入的反馈效果，用添加删除css类实现

function(){$(this).addClass("hover");},

function(){$(this).removeClass("hover");

});

//获取页面的最小高度，无传入值则默认为600像素

min_height ? min_height = min_height : min_height = 600;

//为窗口的scroll事件绑定处理函数

$(window).scroll(function(){

//获取窗口的滚动条的垂直位置

var s = $(window).scrollTop();

//当窗口的滚动条的垂直位置大于页面的最小高度时，让返回顶部元素渐现，否则渐隐

if( s > min_height){

$("#gotoTop").fadeIn(100);

}else{

$("#gotoTop").fadeOut(200);

};

});

};

gotoTop();

CSS代码

/*默认样式，主要是position:fixed实现屏幕绝对定位*/

#gotoTop{display:none;position:fixed;top:75%;left:50%;cursor:pointer;margin-top:-50px;margin-left:520px;padding:9px 4px;width:20px;text-align:center;border:1px solid #e0e0e0;background:#fff;}

/*用CSS表达式(expression)来实现ie6下position:fixed效果*/

#gotoTop{_position:absolute;_top:expression(documentElement.scrollTop + documentElement.clientHeight * 3/4 + "px")}

/*鼠标进入的反馈效果*/

#gotoTop.hover{background:#5CB542;color:#fff;text-decoration:none;}

返回顶部php代码,页面按需返回顶部代码及注释说明相关推荐

安卓怎么显示一段html代码,【报Bug】点击安卓源生返回键会导致页面崩溃直接显示HTML代码...
详细问题描述 [内容] 主页面,设置标签 href="XXXX"跳转到子页面.在点击安卓手机源生的返回.就会有一定几率显示HTML代码而不显示页面 [步骤] 主页面,设置标签 hr ...
lstm代码_只需5行代码！LSTM时间序列建模以及预测
最近我在github上看到一个项目,项目内容是将深度学习方法(LSTM.RNN.GRU)进行时间序列建模的过程进行了封装,使得调用者调用者只需5行代码能完成时间序列建模以及预测的全过程. 项目本身是使 ...
返回上一级刷新页面 Js实现返回上一页（页面刷新和不刷新）
返回上一页不刷新: 1.a标签 <a href="<a href="javascript :history.back(-1)">返回上一页</a& ...
python弹幕代码_只需3 行代码就可以获取B站（弹幕、评论、用户）数据
在今年5月份,我写了一篇爬取B站视频的文章,今天给大家介绍一个获取B站数据的Python扩展库-bilibili_api,可以获取的数据包括: video-视频模块 user-用户模块 dynamic ...
c++编写手机小游戏代码_只需22行代码，用python编写自己的小游戏
假期最后一天,有些人在外面玩累了,有些人躺在家里快发霉了,闲暇时候不如动动手做个小游戏玩一玩吧! 本文实例为大家分享了python编写猜数字小游戏的具体代码,供大家参考,具体内容如下 1 import ...
如何通过HTML标记或JS代码实现跳转返回页面顶部
本文介绍三款简单的返回页面顶部代码,可以使用简单的HTML锚标记,也可使用JavaScript Scroll函数动态返回,其它的还有悬浮脚本等有点复杂了,本文不再介绍,大家根据自己需要选择其中的一种即 ...
android 按钮点击返回顶部,微信浏览器点击系统返回，安卓返回会重载页面回到页面顶部，iOS则返回则会保留之前浏览位置的解决方法...
后续补我框好串端题近还架比作和和近还架比作和和充: 页面css设置了height: 100%,来避免使用fixed定位弹窗引起的部分机型兼容问题,因此会在返回的时候回到页面顶部,补充解决办法: 在弹窗 ...
锚链接返回顶部，同页面、不同页面跳转
1 锚链接其实就是超链接的一种,一种特殊的超链接普通的超链接:<a href="路径"></a> 是跳转到不同的页面锚点:<a href=&qu ...
flutter 返回指定界面_Flutter页面路由导航及传参
转载请注明出处: https://learnandfish.com/ 概述每个应用都有很多个页面,在flutter中同样也有很多页面,被称之为路由(Router),页面之间的跳转通过导航器(Navi ...
react 返回一个页面_react-router-dom 怎么让第二个页面返回到第一个页面使得第一个页面不重新加载...
RT 用了 react-router-dom v4 从列表页( List )点击一项进入详情页( Detail ),在 Detail 里点击返回,返回到 List,这里 List 会重新加载,也就是说 ...

返回顶部php代码,页面按需返回顶部代码及注释说明

返回顶部php代码,页面按需返回顶部代码及注释说明相关推荐

最新文章

热门文章