jQuery实现页面底部滑动置顶

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery实现页面底部滑动置顶 | alleyloft.com</title>
<link type="text/css" rel="stylesheet" href="css/main.css" />
<script type="text/javascript" src="js/jquery-1.6.1.min.js"></script>
<script type="text/javascript">
    $(function(){
        //置顶按钮显示/隐藏实现
        $(window).scroll(function(){
            var w_height = $(window).height();//浏览器高度
            var scroll_top = $(document).scrollTop();//滚动条到顶部的垂直高度
            if(scroll_top > w_height){
                    $("#goto-top").fadeIn(500);
                }else{
                    $("#goto-top").fadeOut(500);
            }
        });
    //置顶
    $("#goto-top").click(function(e){
            e.preventDefault();
            $(document.documentElement).animate({
                scrollTop: 0
                },200);
            //支持chrome
            $(document.body).animate({
                scrollTop: 0
                },200);
        });
    })
</script>
<style type="text/css">
    #goto-top {
        display:none;
        position:fixed;
        width:38px;
        height:36px;
        background:url(images/goto-top.png) no-repeat 0 0;
        bottom:40px;
        right:40px;
        -webkit-transition:all 0.2s;
        -moz-transition:all 0.2s;
        -o-transition:all 0.2s;
        transition:all 0.2s;
        z-index:9999;
    }
    #goto-top:hover {
        background:url(images/goto-top.png) no-repeat 0 -36px;
    }
</style>
</head>

<body>
    <div class="header">
        <div class="logo">
            jQuery实现页面底部滑动置顶 <span>- alleyloft.com</span>
        </div>
    </div>
    <div class="placeholder"></div>
    <div class="nav">
        <div class="ul-box">
<ul class="links">
<li><a href="http://www.alleyloft.com" target="_blank" class="cur">小巷阁楼</a></li>
<li><a href="http://www.alleyloft.com/blog" target="_blank">生活随笔</a></li>
<li><a href="http://www.alleyloft.com/share" target="_blank">技术分享</a></li>
<li><a href="http://www.alleyloft.com/psd" target="_blank">原创PSD作品</a></li>
<li><a href="http://www.alleyloft.com/html" target="_blank">静态HTML模板</a></li>
<li><a href="http://www.alleyloft.com/photo" target="_blank">个人随拍</a></li>
<li><a href="http://www.alleyloft.com/index" target="_blank">音乐欣赏</a></li>
<li><a href="http://www.alleyloft.com/aboutme" target="_blank">关于我</a></li>
</ul>
        </div>
    </div>
    <div class="con">
        <div class="show">
            <div class="banner">
                <a href="http://www.alleyloft.com/photo" target="_blank">
     <img alt="小巷阁楼-alleyloft" title="个人随拍" src="images/banner.jpg" />
                </a>
            </div>
            <div class="article">
                <!--文章内容区-->
            </div>
        </div>
    </div>
    <a href="#" title="返回顶部" id="goto-top"></a>
</body>
</html>
时间: 2024-11-05 16:11:56

jQuery实现页面底部滑动置顶的相关文章

页面开启自启动置顶显示,页面持续获得焦点

首先讲一下本文的使用背景,现有以下需求: 将一个展示页面开机后自动全屏显示,要求运行期间不允许有任何弹窗弹出遮挡住页面,且页面应保持焦点以保证键盘可以操作页面. 开机自动启动我们可以将需要打开的页面的快捷方式或其他自启动的软件放在系统启动文件夹中,路径如下所示: C:\Users\WindowsUserNmae\AppData\Roaming\Microsoft\Windows\Start Menu\Programs\Startup 其中"WindowsUserNmae"为使用电脑的用

页面点击置顶按钮

1.以某一个height为100%的元素为相对定位元素,绝对定位到底部 或者 将元素的位置设置为 position:fixed;  总之,写一个好看的按钮在下面,可以用图片(灰白色). 在hover的时候讲position属性改变为彩色的向上点击按钮. 2.监听滚动事件,在滚动至底部的时候才会出现.顶部的时候自动隐藏. //置顶按钮 $(window).scroll(function(){ if($(document).scrollTop()>160){ $('.goToTop').fadeIn

在UWP中页面滑动导航栏置顶

最近在研究掌上英雄联盟,主要是用来给自己看新闻,顺便copy个界面改一下段位装装逼,可是在我copy的时候发现这个东西 当你滑动到一定距离的时候导航栏会置顶不动,这个特性在微博和淘宝都有,我看了@ms-uap的文章,淘宝的实现方式是改变顶部显示栏的大小,我本来准备按照他那个思路去做的,但发现效果不理想,在滑动的时候,底部的界面也跟着在滑动,这样使得很不友好,所以我准备自己实现一个 先上个最终效果图吧,图比较大,请耐心等待 思路大概是这样的 将这个界面分为两行 <Grid.RowDefinitio

手机H5页面,滑动到底部自动加载下一页内容

做公众号项目中有如下场景,一个H5页面有列表数据,不考虑一次加载所有数据,故需要分页操作,解决方案为滑动到底部自动加载下一页内容.直接在H5的js当中实现. 主要使用jquery的scroll()方法: 当用户滚动指定的元素时,会发生 scroll 事件. scroll 事件适用于所有可滚动的元素和 window 对象(浏览器窗口). scroll() 方法触发 scroll 事件,或规定当发生 scroll 事件时运行的函数. 代码如下: $(window).scroll(function()

jQuery判断页面滚动到底部

有时候我们需要页面滚动到底部的时候去加载更多的数据,实现思路基本上就是判断浏览器页面是否滚动到了页面底部,当滚动到页面底部的时候,用AJAX异步获取数据然后加载到页面中. 利用jQuery判断浏览器页面是否滑动到了底部: <script type="text/javascript"> // scroll event $(window).scroll(function(){ // scroll at bottom if ($(window).scrollTop() + $(w

Javascript笔记----实现Page页面右下角置顶按钮.

从用博客开始,发现博客园中很多博友的博客中在Page右下角都有个图标,不论屏幕怎么拉伸,都始终停留在右下角.点击后页面置顶.后面想想写一个Demo来实现这种效果吧. 一. 图标右下角固定. 1.SS 里面提供了4中布局方式. 其中fixed表示绝对定位元素.所以我们选择使用fixed来实现图标固定. absolute 生成绝对定位的元素,相对于 static 定位以外的第一个父元素进行定位. 元素的位置通过 "left", "top", "right&qu

让提示界面始终保持在页面的最前端(页面置顶)

UIView *parentView = nil; NSArray* windows = [UIApplication sharedApplication].windows; UIView* window = [windows objectAtIndex:0]; if(window.subviews.count > 0) { parentView = [window.subviews objectAtIndex:0]; [parentView addSubview:m_loadingImageV

[置顶]基于MVC4+EasyUI的Web开发框架经验总结(6)在页面中应用下拉列表的处理(转载)

[置顶]基于MVC4+EasyUI的Web开发框架经验总结(6)在页面中应用下拉列表的处理 在很多Web界面中,我们都可以看到很多下拉列表的元素,有些是固定的,有些是动态的:有些是字典内容,有些是其他表里面的名称字段:有时候引用的是外键ID,有时候引用的是名称文本内容:正确快速使用下拉列表的处理,可以提高我们程序界面的美观性和友好型,本文主要介绍在我的Web开发框架以及相关的扩展Web应用中用到的一些代表性下拉列表的处理场景,希望给大家做个参考学习. 1.固定下拉列表的处理 代表性的固定列表有人

鼠标滑动一定距离的左侧菜单置顶效果

如图:上述实现的是鼠标向下滑动90px,左侧菜单整体上移置顶,而菜单在最开始便进行了定位,距离顶部90px 以下为实现这个效果的js代码: /*鼠标滑动一定距离的菜单效果*/ $(document).scroll(function() { var top=$(this).scrollTop(); console.log(top); if(top>90) { $(".sidebar").css("top","0"); } if(top<