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" ...
随机推荐
- JS new RegExp
★实例: var regex = new RegExp('k', 'g'); var v1 = 'akbdk'; v1.match(regex); //检索'k',返回数组(次数组中放的是 目标区域中 ...
- <frameset>框架集中不同<frame>之间的调用【js代码中】
top:永远指分割窗口最高层次的浏览器窗口;parent:包含当前分割窗口的父窗口,本文将围绕js中top.parent.frame进行讲述及他们的应用案例 引用方法top: 该变量永远指分割窗口最高 ...
- test20180829
试题限制均为128MB,1Sec 总分150. 试题一 A题 问题描述: 小A得到了一棵美丽的有根树.这棵树由n个节点以及n - 1条有向边构成,每条边都从父亲节点指向儿子节点,保证除了根节点以外的每 ...
- dbt- 数据构建工具
dbt(数据构建工具)是一个命令行工具,只需编写select语句即可转换仓库中的数据. dbt处理将这些select语句转换为表和视图.DBT帮助做T的ELT(提取,加载和转换) 的过程-它不提取或加 ...
- c#数据库訪问返回值类型为SqlDataReader时使用using时注意的问题
版权声明:本文为博主原创文章,未经博主同意不得转载. https://blog.csdn.net/u010512579/article/details/24011761 在封装通用 SQLSERVER ...
- socket、tcp/ip协议、udp协议
socket通常也称作"套接字",用于描述IP地址和端口,是一个通信链的句柄,应用程序通常通过"套接字"向网络发出请求或者应答网络请求. socket起源于Un ...
- 【转】每天一个linux命令(52):ifconfig命令
原文网址:http://www.cnblogs.com/peida/archive/2013/02/27/2934525.html 许多windows非常熟悉ipconfig命令行工具,它被用来获取网 ...
- oracle之 变更OS时间对数据库的影响
本文:说明提供了操作系统日期变更对数据库.应用程序数据和作业的影响. 1.它将会影响插入的任何记录,如果涉及到sysdate,则更改日期.2.它还会影响在那个日期运行的任何调度器作业. 如果将系统时间 ...
- Vue 介绍
1. 条件 效果图. 如果seen为false,文字将消失 2. 循环 script里定义数据 效果 3. 事件处理 效果如下图, hello world被逆转了
- hadoop技术入门学习之发行版选择
经常会看到这样的问题:零基础学习hadoop难不难?有的人回答说:零基础学习hadoop,没有想象的那么难,也没有想象的那么容易.看到这样的答案不免觉得有些尴尬,这个问题算是白问了,因为这个回答似乎什 ...