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" ...
随机推荐
- 辞树的QAQ水题(字符串统计,思维)
思路:统计一串字符有多少个'A',并分别统计出每个'A'前后有多少'Q'.然后让每个'A'前后的'Q'相乘并相加就能得出结果了. 注意:数据的类型,卡了int,要用long long. 还有就是在pc ...
- 【转载】Python字符串操作之字符串分割与组合
1. str.split():字符串分割函数 通过指定分隔符对字符串进行切片,并返回分割后的字符串列表. 语法: str.split(s, num)[n] 参数说明: s:表示指定的分隔符,不写的话, ...
- 《DSP using MATLAB》Problem 3.9
利用的频移性质为: 本习题代码: %% ------------------------------------------------------------------------ %% Outp ...
- 使用点聚 weboffice 以及vsto、 web service 实现word 的自动化文档处理
开发环境的搭建: 1.visual studio 2010 2. 点聚web office 开发步骤 1. 创建word vsto 项目 比较简单 1. 添加任务窗格 页面如下: 代码如下: 1. 使 ...
- Unity3D 4.x怎样实现动画的Ping Pong效果
近期在看Unity官方的Stealth项目教学视频,视频使用的是Unity旧的版本号,而我如今正在使用的是Unity 4.5,动画系统的操作全然不同了. 依照视频的方式根本无法设置动画的Ping Pi ...
- nginx 配置 vhosts 的方案
网上有很多种 nginx 配置 vhosts,来个比较方便的. 步骤如下: 在 conf 目录建一个vhosts 目录. 在 nginx.conf 末尾加入 include vhosts/*.conf ...
- hadoop大数据处理平台与案例
大数据可以说是从搜索引擎诞生之处就有了,我们熟悉的搜索引擎,如百度搜索引擎.360搜索引擎等可以说是大数据技处理技术的最早的也是比较基础的一种应用.大概在2015年大数据都还不是非常火爆,2015年可 ...
- 搭建openwrt_x86虚拟机环境
1.下载源码 http://downloads.openwrt.org/snapshots/trunk/x86/openwrt-x86-generic-combined-ext4.img.gz 2.格 ...
- webSocket支持的浏览器
- Xshell连接不上Ubuntu的解决方法
xshell连接linux主机时,会出现错误:Could not connect to '127.0.0.1' (port 22): Connection failed. 但是这时能ping通. 通 ...