`

jQuery返回顶部特效,网页右下角的回到顶部按钮

 
阅读更多
//firefox 、google chrome IE 效果不同
<html>
<head>
<title>返回顶部特效,滚动条拖至最底部</title>
<script type="text/javascript" src="http://images.baihe.com/js/jquery-1.3.2.min.js"></script>
<script language="javascript">
$(function(){
var $backToTopTxt = "返回顶部", $backToTopEle = $('<div class="backToTop"></div>').appendTo($("body"))
.text($backToTopTxt).attr("title", $backToTopTxt).click(function() {
$("html, body").animate({ scrollTop: 0 }, 120);
}), $backToTopFun = function() {
var st = $(document).scrollTop(), winh = $(window).height();
(st > 0)? $backToTopEle.show(): $backToTopEle.hide();
//IE6下的定位
if (!window.XMLHttpRequest) {
$backToTopEle.css("top", st + winh - 166);
}
};
$(window).bind("scroll", $backToTopFun);
$(function() { $backToTopFun(); });
});
</script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
/*返回顶部*/
.backToTop {display: none; width: 18px; line-height: 1.2; padding: 5px 0; background-color: #000; color: #fff; font-size: 12px; text-align: center; position: fixed; _position: absolute; right: 10px; bottom: 100px; _bottom: "auto"; cursor: pointer; opacity: .6; filter: Alpha(opacity=60);}
p {height:80px;}
</style>
</head>
<body>
<p>往下拉,才会出来。如果不显示效果,请刷新!!!</p>
<p>往下拉,才会出来。如果不显示效果,请刷新!!!</p>
<p>往下拉,才会出来。如果不显示效果,请刷新!!!</p><p>往下拉,才会出来。如果不显示效果,请刷新!!!</p><p>往下拉,才会出来。如果不显示效果,请刷新!!!</p><p>往下拉,才会出来。如果不显示效果,请刷新!!!</p><p>往下拉,才会出来。如果不显示效果,请刷新!!!</p><p>往下拉,才会出来。如果不显示效果,请刷新!!!</p><p>往下拉,才会出来。如果不显示效果,请刷新!!!</p><p>往下拉,才会出来。如果不显示效果,请刷新!!!</p><p>往下拉,才会出来。如果不显示效果,请刷新!!!</p><p>往下拉,才会出来。如果不显示效果,请刷新!!!</p><p>往下拉,才会出来。如果不显示效果,请刷新!!!</p><p>往下拉,才会出来。如果不显示效果,请刷新!!!</p><p>往下拉,才会出来。如果不显示效果,请刷新!!!</p><p>往下拉,才会出来。如果不显示效果,请刷新!!!</p><p>往下拉,才会出来。如果不显示效果,请刷新!!!</p><p>往下拉,才会出来。如果不显示效果,请刷新!!!</p><p>往下拉,才会出来。如果不显示效果,请刷新!!!</p><p>往下拉,才会出来。如果不显示效果,请刷新!!!</p><p>往下拉,才会出来。如果不显示效果,请刷新!!!</p><p>往下拉,才会出来。如果不显示效果,请刷新!!!</p><p>往下拉,才会出来。如果不显示效果,请刷新!!!</p><p>往下拉,才会出来。如果不显示效果,请刷新!!!</p><p>往下拉,才会出来。如果不显示效果,请刷新!!!</p>
<p>往下拉,才会出来。如果不显示效果,请刷新!!!</p>
<p>往下拉,才会出来。如果不显示效果,请刷新!!!</p><p>往下拉,才会出来。如果不显示效果,请刷新!!!</p><p>往下拉,才会出来。如果不显示效果,请刷新!!!</p><p>往下拉,才会出来。如果不显示效果,请刷新!!!</p><p>往下拉,才会出来。如果不显示效果,请刷新!!!</p><p>往下拉,才会出来。如果不显示效果,请刷新!!!</p><p>往下拉,才会出来。如果不显示效果,请刷新!!!</p><p>往下拉,才会出来。如果不显示效果,请刷新!!!</p><p>往下拉,才会出来。如果不显示效果,请刷新!!!</p><p>往下拉,才会出来。如果不显示效果,请刷新!!!</p><p>往下拉,才会出来。如果不显示效果,请刷新!!!</p><p>往下拉,才会出来。如果不显示效果,请刷新!!!</p><p>往下拉,才会出来。如果不显示效果,请刷新!!!</p><p>往下拉,才会出来。如果不显示效果,请刷新!!!</p><p>往下拉,才会出来。如果不显示效果,请刷新!!!</p><p>往下拉,才会出来。如果不显示效果,请刷新!!!</p><p>往下拉,才会出来。如果不显示效果,请刷新!!!</p><p>往下拉,才会出来。如果不显示效果,请刷新!!!</p><p>往下拉,才会出来。如果不显示效果,请刷新!!!</p><p>往下拉,才会出来。如果不显示效果,请刷新!!!</p><p>往下拉,才会出来。如果不显示效果,请刷新!!!</p><p>往下拉,才会出来。如果不显示效果,请刷新!!!</p>
</body>
</html><div style="text-align:center;margin:30px 0 0 0;"><hr style="color:#999;height:1px;">如不能显示效果,请按Ctrl+F5刷新本页,更多网页代码:<a href='http://www.veryhuo.com/' target='_blank'>http://www.veryhuo.com/</a></div>
分享到:
评论

相关推荐

    jquery返回顶部 网页右下角返回顶部或者底部不同风格特效.zip

    这个压缩包“jquery返回顶部 网页右下角返回顶部或者底部不同风格特效.zip”显然是一个包含jQuery实现的返回顶部效果的资源集合。jQuery是一个广泛使用的JavaScript库,它简化了JavaScript代码的编写,使得实现各种...

    jquery网页右下角返回页面顶部或者底部特效

    这个特效允许用户在浏览长篇内容时,通过点击页面右下角的按钮轻松地回到页面的开头或结尾,从而提升浏览效率。本文将详细讲解如何使用jQuery实现这样的功能。 首先,我们需要了解jQuery,这是一个强大的JavaScript...

    div css3样式表制作jquery返回顶部特效

    在网页设计中,"div css3样式表制作jquery返回顶部特效"是一个常见的需求,它能够提升用户体验,使得用户在浏览长页面时能快速返回页面顶部。这个主题涉及到三个主要技术:HTML的`div`元素、CSS3样式以及jQuery库。 ...

    jQuery网站右侧悬浮带二维码返回顶部代码.zip

    在这个项目中,jQuery被用来监听滚动事件,当用户向下滚动页面时,悬浮的返回顶部按钮会显示出来;当用户向上滚动时,按钮则隐藏。此外,点击这个按钮,页面会平滑地滚动到顶部,提升用户的浏览体验。 其次,...

    jQuery右下角浮动层火箭动画返回顶部效果代码.zip

    本资源提供的是一款基于jQuery实现的右下角浮动层火箭动画返回顶部效果代码,它将为你的网站增添一丝趣味性与互动性。 首先,jQuery是一个广泛使用的JavaScript库,简化了DOM操作、事件处理、动画以及Ajax交互等...

    jquery网页右下角返回页面顶部或者底部特效.zip

    标题 "jquery网页右下角返回页面顶部或者底部特效.zip" 提供了我们即将讨论的核心内容:一个使用jQuery实现的网页功能,允许用户轻松地从页面的右下角回到顶部或底部。这个功能对于长页面浏览体验尤其有用,因为它...

    jQuery网页右侧二维码返回顶部按钮代码

    这种设计通常出现在网页的右下角,包含一个二维码图标用于扫描关注,以及一个返回顶部的按钮,方便用户快速回到页面顶部。 首先,jQuery是一个轻量级的JavaScript库,它简化了HTML文档遍历、事件处理、动画和Ajax...

    jQuery网页右侧浮动二维码返回顶部代码.zip

    2. **返回顶部功能**:这是一个常见的网页交互元素,当用户滚动页面到底部时,点击返回顶部按钮可以迅速回到页面的起始位置。通过监听滚动事件,判断页面滚动位置,当达到一定阈值时显示返回顶部按钮,点击后使用`...

    实现返回顶部和底部的Jquery特效

    本文将详细探讨如何使用JQuery实现返回顶部和底部的特效。 首先,我们需要在HTML文档中添加必要的结构。为了实现返回顶部的按钮,可以在页面底部添加一个锚点元素,例如: ```html &lt;a id="top"&gt;&lt;/a&gt; 返回顶部 ``` ...

    jQuery右侧微信返回顶部.zip

    "jQuery右侧微信返回顶部" 是一个利用JavaScript库jQuery实现的特定返回顶部效果,设计独特,常被应用于网页的右下角,模仿微信应用中的返回顶部样式。 jQuery是一个轻量级、高性能的JavaScript库,它简化了HTML...

    jquery可变透明度返回顶部特效.zip

    在网页设计中,用户体验是至关重要的,而"jquery可变透明度返回顶部特效"就是一种提升用户交互体验的优秀实践。这个特效利用JavaScript库jQuery,实现了当用户在页面上滚动超过特定距离(例如1200像素)时,一个返回...

    jquery配合seajs框架实现返回顶部特效.zip

    返回顶部特效通常是网页设计中的一种常见功能,当用户滚动页面到一定距离后,会在页面边缘(如右下角)出现一个“回到顶部”的按钮。点击这个按钮,页面会平滑滚动回顶部,提升用户的浏览体验。在本项目中,jQuery ...

    jQuery实现带底部返回顶部按钮功能特效源码.zip

    HTML部分可能包含一个`&lt;a&gt;`标签,作为返回顶部的链接,而CSS则用于定义按钮的样式和位置,通常将其设置为固定在页面底部或右下角。 然后,jQuery的`click()`方法用于监听按钮的点击事件。当用户点击该按钮时,会...

    jQuery和css3固定右下角的最小化导航菜单插件

    **jQuery和CSS3技术在构建固定右下角的最小化导航菜单中的应用** 在网页设计中,导航菜单是用户与网站交互的关键元素。一个高效且易于使用的导航菜单能够提升用户体验,帮助用户快速找到所需信息。在给定的“jQuery...

    简单实用jQuery返回顶部代码.zip

    2. **CSS 样式**:为这个元素设置样式,包括位置(通常设为固定定位在屏幕右下角)、隐藏(默认不显示)和鼠标悬停时的缩放效果。 3. **jQuery 插入**:在页面加载完成后,通过`$(document).ready()`函数确保所有...

    jQuery带微博按钮返回顶部效果.zip

    该特效在页面滚动到底部时,会在右下角显示一个带有微博图标的小按钮,点击后页面将平滑滚动回到顶部,增加了网站的用户友好性。 首先,jQuery是一个广泛使用的JavaScript库,它简化了HTML文档遍历、事件处理、动画...

    jQuery无图片网站回到顶部特效.zip

    总的来说,“jQuery无图片网站回到顶部特效”是一个利用JavaScript和CSS实现的功能组件,它体现了jQuery的便捷性和CSS的灵活性,同时也展示了如何在没有图片资源的情况下创建美观且实用的网页元素。通过学习和运用...

    猪八戒网站jQuery返回顶部.zip

    本项目“猪八戒网站jQuery返回顶部.zip”聚焦于实现这一功能,采用流行的JavaScript库jQuery来创建一个具有淡入淡出效果的返回顶部按钮。以下是对这个项目的详细解析: 首先,jQuery是一个轻量级、高性能的...

Global site tag (gtag.js) - Google Analytics