jQuery实现置顶和置底特效

原文地址:http://www.jqueryba.com/3403.html

<script src="jquery.min.js" type="text/javascript">
</script>
<script type="text/javascript">
    $(function() {
        $("#updown").css("top", window.screen.availHeight / 2 - 100 + "px");
        $(window).scroll(function() {
            if ($(window).scrollTop() >= 100) {
                $(‘#updown‘).fadeIn(300);
            } else {
                $(‘#updown‘).fadeOut(300);
            }
        });
        $(‘#updown .up‘).click(function() {
            $(‘html,body‘).animate({
                scrollTop: ‘0px‘
            },
            800);
        });
        $(‘#updown .down‘).click(function() {
            $(‘html,body‘).animate({
                scrollTop: document.body.clientHeight + ‘px‘
            },
            800);
        });
    });
</script>
时间: 2024-08-03 05:06:27

jQuery实现置顶和置底特效的相关文章

HTML实现置顶--&gt;火箭置顶

HTML实现置顶操作 需要引入JQuery,案例中引入的是jquery-1.11.2.min.js 需要图片 以下为案例源码: -------------------------------------- <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="Generator" content=&

js数组移动上移下移置顶置底,vue实现表格上下移动置底置顶

js操作数组移动 //先封装js数组交换顺序方法 /*参数说明 arr是要操作的数组 index1 是准备移动的元素 index2 是准备移动到的位置 往下移就是 index2=index+1 往上移动就是 index2=index+1: 这个也可以在页面试试那个方法就指导了,但是置顶和置底还有点差别 */ var swapItems = function(arr, index1, index2,direction) { if(direction=='up'){//置顶 arr.unshift(

iOS UILabel 文字 置顶/置底 实现

iOS UILabel控件默认文字位置是居中的,如图所示: 但是我们经常碰到这样的需求,希望文字向上置顶,或者向下置底,但是很遗憾,iOS API中并没有提供相应的属性和方法,需要我们手动设置. 利用 分类(category)为UILabel添加属性 isTop 和 isBottom来控制文字是否置顶和置底. 实现:利用往文字后面活前面下面添加"\n"来实现文字填充满整个UILable控件实现置顶/置顶效果 .h文件 #import <UIKit/UIKit.h> @int

在有序数据表中实现多记录上移下移置顶置底算法思路

引言 数据库应用中常需要在一个有序数据子集中,对指定的若干条记录进行上下移动.例如,管理员需要对新闻列表中的若干条新闻置顶,考试出卷时需要对选定题目进行上下移动重排顺序,等等. 总的应该场景在数据表中可以概括为如下模型: 数据表 TblData(id,fid,rank),id表示记录的唯一标识,fid指记录的父节点,rank代表父节点下兄弟的前后顺序,依次从1递增,没有空隙. 问题是要对相同fid下选中的若干个节点进行上下移动,如图1中的2个示例: 图 1 上移操作示例图 左侧示例是对第5.6两

jq实现置顶

JQuery实现置顶.置底.向上.向下.取消排序功能 <pre name="code" class="html"><!DOCTYPE html> <html> <head> <title>sort.html</title> <script type="text/javascript" src="js/jquery-1.4.2.js"></

用sql语句取设置了置顶的记录

select * from products order by case when isTop=0 then 1 else 0 end,pId desc 这句语句我是这么理解的: isTop=0(设为1) 未置顶 =1置顶(设为0):升序排列. pId是表的主键,自增长:降序排列. 这样就能将主键降序与置顶统一按降序排列出来了.

[知了堂学习笔记]_css3特效第二篇--行走的线条&amp;&amp;置顶导航栏

一.行走的线条. 效果图(加载可能会慢一点儿,请稍等...): html代码: 1 <div class="movingLines"> 2 <img src="images/ser2.jpg" alt=""><!-- 背景图片--> 3 <div class="cover cover2"><!-- 遮盖层--> 4 <div class="innerB

将滚动条置顶,置底

Message.prototype.setScrollToBottom = function () { // 整个文档所占的高度 var scrollHeight = (function getScrollHeight(){ var scrollHeight = 0, bodyScrollHeight = 0, documentScrollHeight = 0; if(document.body){ bodyScrollHeight = document.body.scrollHeight; }

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