js小效果:返回顶部 scrollTop 。 滚屏:animate
返回顶部:
(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的更多相关文章
- 第50天:scrollTo小火箭返回顶部
scrollTo(x,y)//可把内容滚动到指定的坐标scrollTo(xpos,ypos)//x,y值必需 1.固定导航栏 <!DOCTYPE html> <html lang=& ...
- js+JQuery实现返回顶部功能
很多网站上都有返回顶部的效果,本文阐述如何使用jquery实现返回顶部按钮. 首先需要在顶部添加如下html元素: <p id="back-to-top"><a ...
- zepto的返回顶部scrollTop的动画解决方法
写移动端的时候,引入的zepto.js里的animate不包括scrollTop,所以返回顶部的时候,没有动画的效果.这里我使用的是setInterval的方法.代码详情如下 <!DOCTYPE ...
- 小程序返回顶部top滚动
wxjs const app = getApp(); Page({ data:{ // top标签显示(默认不显示) backTopValue:false }, // 监听滚动条坐标 onPageSc ...
- js中点击返回顶部
window.scrollTo(0, 0);当点击返回顶部的时候调用这个方法即可 handleScrollTop(){ window.scrollTo(0, 0); }
- js小效果-轮播图
<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8" ...
- js 点击 返回顶部 动画
附上效果图 触发前 触发后 HTML代码: CSS代码 JS代码 由于复制文本太丑了 所以直接放的图片 但是我在评论区把js代码又复制了一边 以便你们使用
- 纯js实现页面返回顶部的动画
啥也不说了,直接上代码 var scrollTop = document.body.scrollTop; document.body.style.marginTop = -scrollTop + 'p ...
- js小效果-全选
<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8" ...
随机推荐
- qwb的骚扰
题目描述 自从学姐拒绝了qwb之后,qwb开始了疯狂的骚扰.qwb来到了一个公共电话亭,他摸摸口袋只有n元钱. 已知该公用电话的规则是,前3分钟一共收费x元(不到3分钟也要收x元),超过3分钟每分钟收 ...
- 三值 bool? 进行与或运算后的结果
bool? 实际上是 Nullable<Boolean> 类型,可以当作三值的 bool 类型来使用.不过三值的布尔进行与或运算时的结果与二值有什么不同吗? 本文内容 重载条件逻辑运算符“ ...
- 有用的sql语句积累
⑴. sql查询未被外键关联的数据 select * from bb b where not exists (select 1 from aa a where a.bid=b.bid)
- systemd开机启动
SUMMARY = "rvc_os temporary version" HOMEPAGE = "http://www.desay-svautomotive.com&qu ...
- u-boot分析
4.Bootloader:u-boot.2009.08分析与移植4.1:分析u-boot根文件夹下的Makefile,能够看到uboot编译的顺序例如以下,由此可知编译运行的第一个文件是cpu/$(C ...
- 变量延迟(setlocal)之浅见
变量延迟,浅见认为就是变量预处理,在事先声明变量,告诉cmd环境哪个先哪个后.默认情况下是停用,可以用两种方法启用/停用: 一.cmd /v:on 和cmd /v:off ,范围在cmd这个环境直至e ...
- Java的四种引用之强弱软虚
在java中提供4个级别的引用:强引用.软引用.弱引用和虚引用.除了强引用外,其他3中引用均可以在java.lang.ref包中找到对应的类.开发人员可以在应用程序中直接使用他们. 1 强引用 强引用 ...
- 创建对象的一种方式&一种继承机制(代码实例)
/* 创建对象的一种方式:混合的构造函数/原型方式, *用构造函数定义对象的所有非函数属性,用原型方式定义对象的函数属性(方法) */ function People(sname){ this.nam ...
- jsp渲染
SP与Servlet什么关系?JSP和ASP什么关系?下面我们一一来探讨. 第一个.jsp文件:<html> <head> <title> ...
- wsdl详解
<wsdl:definitions xmlns:wsdl="http://schemas.xmlsoap.org/wsdl/" xmlns:ns1="http:// ...