回到顶部 插件

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
  <meta name="keywords" content="" />
  <meta name="description" content="" />
  <title>回到顶部</title>
  <script type="text/javascript" src="js/jquery.js"></script>
  <script type="text/javascript" src="js/popwin.js"></script>
  <style>
    html,body {height:3200px}
    html,body,form,input,span,p,img,ul,ol,li,dl,dt,dd {margin:0; padding:0;border:0}
    a { text-decoration:none}
       a:hover {text-decoration:underline}
      #moquu_top{ z-index:2;width:50px;height:50px;right:30px; position:fixed;cursor:pointer;bottom:60px;background:#f00 url(../images/sbtn.png) 0 -101px;}
      #moquu_top:hover {background:#ff0 url(../images/sbtn.png) -50px -101px}  </style>
</head>
<body>
    <a id="moquu_top" href="javascript:"></a>
</body>
</html>
//返回顶部
function b() {
    h = $(window).height(),
    t = $(document).scrollTop()+h,
    t > h ? $("#moquu_top").show() : $("#moquu_top").hide()
}
$(document).ready(function() {
    b(),
    $("#moquu_top").click(function() {
        $(document).scrollTop(0)
    })
}),
$(window).scroll(function() {
    b()
});
时间: 2024-08-01 07:06:07

回到顶部 插件的相关文章

jQuery回到顶部插件jQuery GoUp

插件描写叙述 jQuery GoUp!是一个简单的jQuery插件,让你的网页用户直接回到顶部. 用法很easy 引用jquery库和jquery.goup.min.js到你的页面 <script type="text/javascript" src="jquery.min.js"></script> <script type="text/javascript" src="jquery.goup.min.j

JS 回到顶部插件

=====================js============== ;(function($){    $.extend({        myScrollUp:function(options){                            var defaults={                    scrollName:"scrollUp",                    topDistance:"300",          

浮动【电梯】或【回到顶部】小插件:iElevator.js

iElevator.js 是一个jquery小插件,使用简单,兼容IE6,支持UMD和3种配置方式,比锚点更灵活. Default Options _defaults = { floors: null, btns: null, backtop: null, selected: '', sticky: -1, visible: { isHide: 'no', numShow: 0 }, speed: 400, show: function(me) { me.element.show(); }, h

jquery回到顶部源码分享-

// JavaScript Document (function($){ var goToTopTime; $.fn.goToTop=function(options){ var opts = $.extend({},$.fn.goToTop.def,options); var $window=$(window); $body = (window.opera) ? (document.compatMode == "CSS1Compat" ? $('html') : $('body'))

一个回到顶部的锚点

一般网站的右下角都会有一个回到顶部的锚点,但是在没有学bootstrap的时候,我还是会想着用定位来做这个东西,但是现在用bootstrap来做的,所以将它记录下来. <!DOCTYPE html> <html> <head> <title>附加导航插件</title> <meta charset = 'utf-8'> <link rel = 'stylesheet' href = 'http://files.cnblogs.c

JavaScript实现的回到顶部效果

参考自:http://www.imooc.com/learn/65 几乎所有的网站都会有回到顶部的功能,可以直接用锚点(#)实现,但是跳转的很生硬. 1.使用插件,我之前在介绍两个JQuery插件 — 滚动和轮播说过一个滚动插件,使用效果不错. 我在自己的小项目使用了:旅行笔记 2.原生的JS实现. 有两个点,一个是window 的滚动事件:window.onscroll,另一个是setInterval和clearInterval. 具体内容见代码,里面注释了. window.onload =

JQuery实现回到顶部

当一个页面的内容比较长时,一般都在页面的右下角的固定位置有个"回到顶部"的按钮,点击后,页面的滚动条逐渐回滚到顶部,本篇来描述一个它的实现过程. 首先,需要有一个按钮 <button id="btn_top" title="回到顶部"> 回到顶部 </button> 然后给这个元素定位到右下角,我们使用position:fixed.下面这个按钮加一些最基本的样式 #btn_top { position: fixed; bo

Angular回到顶部按钮指令

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

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