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" ...
随机推荐
- linux学习——sed工具
命令格式: sed [-nefr] [动作] 1.sed可以分析标准输入(STDIN)的数据,然后将数据处理后,再将他输出到标准输出(STDOUT),他有替换.删除.新增.选定特定行等处理功能.sed ...
- Oracle C#处理时间类型的Insert
首先如果直接 parm.Value=DateTime.Now; insert into table (TheTime)Value(@parm); 执行sql就会报错 ----------- ...
- 根据IP获得城市信息(百度API的运用)
/** * 根据IP获取城市 * @param string $ip ip地址 * @return array * http://api.map.baidu.c ...
- nyoj 单调递增子序列(二)
单调递增子序列(二) 时间限制:1000 ms | 内存限制:65535 KB 难度:4 描述 给定一整型数列{a1,a2...,an}(0<n<=100000),找出单调递增最长 ...
- 海思3518EV200 SDK中获取和保存H.264码流详解
/****************************************** step 2: Start to get streams of each channel. ********** ...
- 【转】RS232、RS485、TTL电平、CMOS电平
原文网址:http://blog.sina.com.cn/s/blog_63a0638101018grc.html RS232.RS485.TTL电平.CMOS电平 什么是TTL电平.CMOS电平.R ...
- RAC3——RAC原理开始
1.RAC并发 RAC的本质是一个数据库,只不过现在这个数据库运行在了多台计算机上,在原先的单实例中,一个进程是否可以修改一条数据,取决于是否有其他进程(同一台计算机上)并发修改.在RAC环境下,这种 ...
- spring答题
ioc 依赖注入:通过注入的方式实例化对象,不再直接new对象了,交给spring容器进行管理和维护 控制反转:实例化对象的控制权交给了spring容器,而不再是某个单独的类,控制权发生了变更 作用: ...
- asp.net core 2.0 试用
1.win7专业版,创建core2.0应用后,运行一直报网关错误,后重装社区版, 安装了asp.net和web开发 数据存储和处理 创建Core2.0应用及打开原2.0应用均正常. 2.win10专业 ...
- TroubleShoot: Enable Developer Mode in Windows 10 Insider Preview Build 10074
There is a known issue in Windows 10 Insider Preview build 10074 (see here). Developers cannot enabl ...