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" ...
随机推荐
- CTF之猪圈密码
猪圈密码又称济会密码,朱高密码,是一种简单的替代密码,所以安全性很低
- 【问题】C4D中设置了界面颜色,如何恢复默认?
由于C4D没有恢复默认设置的选项,恢复默认的时候比较麻烦,这里简单删除一下配置文件就好了. 1.打开C4D设置,点击下面的[打开配置文件夹],并关掉C4D. (即C:\Users\你的用户名\AppD ...
- gcd模板(欧几里得与扩展欧几里得、拓展欧几里得求逆元)
gcd(欧几里得算法辗转相除法): gcd ( a , b )= d : 即 d = gcd ( a , b ) = gcd ( b , a mod b ):以此式进行递归即可. 之前一直愚蠢地以为辗 ...
- FutureTask的用法及两种常用的使用场景 + FutureTask的方法执行示意图
from: https://blog.csdn.net/linchunquan/article/details/22382487 FutureTask可用于异步获取执行结果或取消执行任务的场景.通过 ...
- [题解] CodeM美团点评编程竞赛资格赛题
最近看到牛课网美团一个编程竞赛,想着做做看,结果一写就是两天..真是写不动了啊.话不多说,下面开始我的题解. 题目大致还是比较考察思维和代码能力(因为自己代码能力较弱,才会觉得比较考察代码能力吧= = ...
- smarty学习——内建函数(部分接上)
9.{foreach} {foreachelse} 格式如下: {foreach $arrayvar as $itemvar} {foreach $arrayvar as $keyvar=>$i ...
- Cygwin安装与使用入门
版权声明:本文为博主原创文章,未经博主同意不得转载. https://blog.csdn.net/canlets/article/details/28646115 对于 UNIX 本身,也有各种称呼. ...
- zz 史上最全--各银行借记卡的年费、小额管理费、转账费等!
史上最全--各银行借记卡的年费.小额管理费.转账费等! 发布时间:2015-01-14 17:28:10 还在迷茫借记卡自费的菜主儿们~菜菜特别整理关于各银行借记卡.存折账户等的年费.小额管理费.转账 ...
- openwrt lamp
https://applefreak111.wordpress.com/2013/03/12/howtoopenwrt-lamp-stack%E5%AE%89%E8%A3%9D/ opkg updat ...
- keepalived配置主从备份
keepalived配置主从备份 keepalived是一个用于做双机热备(HA)的软件,常和haproxy联合起来做热备+负载均衡,达到高可用. 运行原理 keepalived通过选举(看服务器 ...