返回顶部:

(scroll 滚屏事件,如果超出第一屏,显示返回顶部的按钮)

<div id="gotop" onclick="javascript:scroll(0,0);"><img src="data:images/top33x33.png"></div>
<style type="text/css">
#gotop{display:none;position:fixed;right:5px;bottom:4rem;width:33px;height:33px;z-index:999;}
</style>
<script type="text/javascript" src="http://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$(window).scroll(function() {//滚屏
var scrollTop = $(document.body).scrollTop();//滚动高度
var windowH = $(window).height();//页面高度
if(scrollTop>windowH){
$("#gotop").show();
}else{
$("#gotop").hide();
}
});
});
</script>

屏幕滚动到某个像素处:2015-11-18

var scrollTop = $(this).offset().top;
$(document.body).scrollTop(scrollTop-50);

返回顶部、返回页面顶部:  2016-4-22

$('.sidebarnav .sbnl-gotop').click(function(){//回到顶部
$(document.body).animate({scrollTop: '0px'}, 800);
});

侧导航的显示隐藏:(要求,滚屏超过100px后,显示侧导航。初始状态下不显示侧导航)  2016-4-22

/* 侧导航 */
$(window).scroll(function() {//滚屏
var scrollTop = $(document.body).scrollTop();//滚动高度
//var windowH = $(window).height();//页面高度
if(scrollTop>100){
$('.sidebarnav').show();
}else{
$('.sidebarnav').hide();
}
});

..

js小效果:返回顶部 scrollTop 。 滚屏:animate的更多相关文章

  1. 第50天:scrollTo小火箭返回顶部

    scrollTo(x,y)//可把内容滚动到指定的坐标scrollTo(xpos,ypos)//x,y值必需 1.固定导航栏 <!DOCTYPE html> <html lang=& ...

  2. js+JQuery实现返回顶部功能

    很多网站上都有返回顶部的效果,本文阐述如何使用jquery实现返回顶部按钮. 首先需要在顶部添加如下html元素: <p id="back-to-top"><a  ...

  3. zepto的返回顶部scrollTop的动画解决方法

    写移动端的时候,引入的zepto.js里的animate不包括scrollTop,所以返回顶部的时候,没有动画的效果.这里我使用的是setInterval的方法.代码详情如下 <!DOCTYPE ...

  4. 小程序返回顶部top滚动

    wxjs const app = getApp(); Page({ data:{ // top标签显示(默认不显示) backTopValue:false }, // 监听滚动条坐标 onPageSc ...

  5. js中点击返回顶部

    window.scrollTo(0, 0);当点击返回顶部的时候调用这个方法即可 handleScrollTop(){ window.scrollTo(0, 0); }

  6. js小效果-轮播图

    <!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8" ...

  7. js 点击 返回顶部 动画

    附上效果图 触发前 触发后 HTML代码: CSS代码 JS代码 由于复制文本太丑了 所以直接放的图片  但是我在评论区把js代码又复制了一边 以便你们使用

  8. 纯js实现页面返回顶部的动画

    啥也不说了,直接上代码 var scrollTop = document.body.scrollTop; document.body.style.marginTop = -scrollTop + 'p ...

  9. js小效果-全选

    <!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8" ...

随机推荐

  1. pymysql模块操作数据库

    pymysql模块是python操作数据库的一个模块   connect()创建数据库链接,参数是连接数据库需要的连接参数 使用方式: 模块名称.connect() 参数: host=数据库ip po ...

  2. Sereja ans Anagrams 优先队列控制

    Sereja has two sequences a and b and number p. Sequence a consists of n integers a1, a2, ..., an. Si ...

  3. [LOJ6029~6052]雅礼集训 2017 选做

    Link 代码可以在loj上看我的提交记录. Day 1 [LOJ6029]市场 对于一次除法操作,若区间内所有数的减少量均相同则可视作区间减法,否则暴力递归下去.显然一个线段树节点只会被暴力递归进去 ...

  4. POJ2155 Matrix

    分析 好博客 区间修改,单点查询的题,可以用经典的树状数组的转化,把它化为单点修改,区间查询. 方法是在一些点上加1,最后查询单点的前缀和模2即为答案.相当于维护的是一个异或差分,利用了容斥. 可对查 ...

  5. matplotlib-------标记特殊点

    import matplotlib.pyplot as plt import numpy as np def demo_test(): a=np.array([0.15,0.16,0.14,0.17, ...

  6. python 2个dict如何合并

    dictMerged2 = dict( dict1, **dict2 ) 这种效率比较高 refer to: http://www.pythoner.com/13.html

  7. MySQL Transaction--RC和RR区别

    在MySQL中,事务隔离级别RC(read commit)和RR(repeatable read)两种事务隔离级别基于多版本并发控制MVCC(multi-version concurrency con ...

  8. C语言面试题2

    预处理 问题1:什么是预编译?何时需要预编译? 答:预编译又称预处理,是整个编译过程最先做的工作,即程序执行前的一些预处理工作.主要处理#开头的指令.如拷贝#include包含的文件代码.替换#def ...

  9. java 的关键字 native

    native native 关键字说明其修饰的方法是一个原生态方法,方法对应的实现不是在当前文件,而是在用其他语言(如C和C++)实现的文件中.Java语言本身不能对操作系统底层进行访问和操作,但是可 ...

  10. 深入理解ASP.NET MVC(4)

    系列目录 DataTokens和Areas机制 到目前为止Route对象只剩下DataTokens属性没有涉及,事实上这个Areas机制的核心. DataTokens实际上也是一个RouteValue ...