添加回到顶部按钮

获取览器显示区域的高度 : $(window).height(); 获取浏览器显示区域的宽度 :$(window).width();获取页面的文档高度 :$(document).height();获取页面的文档宽度 :$(document).width();获取滚动条到顶部的垂直高度 :$(document).scrollTop();获取滚动条到左边的垂直宽度 :$(document).scrollLeft();

//监听滚动条滚动事件
  $(window).scroll( function() {      var  WindowHeight=($(window).height());      var  ScrollHeight=$(document).scrollTop();      if(WindowHeight<=ScrollHeight){              $(‘.top_img‘).removeClass(‘displayno‘);              }else{               $(‘.top_img‘).addClass(‘displayno‘);           }} );//设置锚点链接//a1<a href="#1F"></a>//a2<a href="" name="1F" id="1F">点击a1会链接到a2的页面在ci框架中在head中加上base_url的时候<base href=‘<?= base_url().‘h5/treasure_v2/‘?>‘>a的href的链接地址需要改成<?= site_url(‘/treasure/treasure_view‘)?>#1f(ps注意#1F书写的位置不要在>里面)
				
时间: 2024-10-09 16:36:51

添加回到顶部按钮的相关文章

octopress添加回到顶部按钮

准备回到顶部的png图片一枚,可以随自己喜好google.分享我的 取名top.png,保存在octopress/source/images/top.png octopress/source/_includes/custom/目录下新建网页文件:totop.html <!--返回顶部开始--> <div id="full" style="width:0px; height:0px; position:fixed; right:80px; bottom:80p

Angular回到顶部按钮指令

之前的分页代码指令化在线下测试没有问题,到服务器上就不运行了,所以那个先放一放. 今天来把"回到顶部"按钮指令化.首先是页面html: <!--回弹按钮--> <back-button></back-button> 指令的单词在html中使用横杠分隔,而在js代码中使用驼峰法,没毛病,简单不解释: /* 回弹按钮指令 * */ app.directive('backButton', function() { return { restrict: 'E

回到顶部按钮

本实战来自个人研究,不一定是最好的! 仅支持IE8及以上版本! HTML: 1 <!--回到顶部 开始--> 2 <div id="to_top" class="to_top"> 3 <i class="to_top_pic"></i> 4 </div> 5 <!--回到顶部 结束--> CSS: 1 /*回到顶部按钮,切忌初始化不要用float.position(absol

listview下拉到一定位置显示回到顶部按钮

布局文件: <RelativeLayout android:id="@+id/ll_list" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_above="@+id/ll_bottom" android:layout_below="@id/ll_top" > <

简单地做一下“回到顶部”按钮,用jQuery实现其隐藏和显示

1.首先,我们要准备HTML代码: <div id="return-top"> <a href="#top">返回顶部</a> </div> 这里的<a>标签里面的href=“#top”就表示点击它就可以回到顶部,就不写回到顶部的代码了 2.设置其CSS样式: #return-top{ width: 50px; height: 50px; background-color: #8FBC8F;/*背景颜色*/

Vue+element UI实现“回到顶部”按钮组件

介绍 这是一个可以快速回到页面顶部的组件,当用户浏览到页面底部的时候,通过点击按钮,可快速回到页面顶部. 使用方法 由于该组件是基于element-UI进行二次封装的,所以在使用该组件时请务必安装element-UI(安装方式猛戳这里),安装好element-UI后,只需将该组件文件夹BackToTop导入到现有项目中即可使用. 使用示例 <template> <div id="app"> <!--可自定义按钮的样式.show/hide临界点.返回的位置

JQuery实现淡入淡出的回到顶部按钮

效果如下: 按钮的html和css代码如下. <div id="gotop"> <i class="fa fa-chevron-up"></i> </div> i标签<i class="fa fa-chevron-up"></i>使用了Font Awesome,400多个图标(包括QQ.微信.微博)只要30KB,可无限放大,不需要js,非常的??. 按钮gotop用fixed

JS——给网页添加返回顶部按钮

在页面右下方添加一个返回顶部按钮,当页面滑到一定位置时,按钮出现,否则消失,默认隐藏 代码如下: 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>返回顶部</title> 6 <style type="text/css"> 7 .content{ wid

html css jquery 回到顶部按钮

今天做了个回到顶部的功能,在这里记录一下,有需要可以拿去试试! CSS部分,很简单就一个class /*回到顶部*/ .back-top { position: fixed; right: 15px; bottom: 15px; z-index: 9999; font-size: 25px; width: 40px; height: 40px; background-color: #adadad; color: #ffffff; cursor: pointer; border-radius: 2