js小效果:返回顶部 scrollTop 。 滚屏:animate
2024-10-13 05:03:35
返回顶部:
(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();
}
});
..
最新文章
- Android 开发命令行完全攻略
- malloc error:初始值设定元素不是常量
- mac平台多个php版本快速切换
- JavaScript计算日期间隔以及结果错误(少一天)的解决方法
- android学习日记03--常用控件button/imagebutton
- 14.3 InnoDB Multi-Versioning InnoDB 多版本
- Ubuntu11.10与r8168网卡不兼容导致网络时断时续的问题
- JavaScript新手学习笔记3——三种排序方式(冒泡排序、插入排序、快速排序)
- location的使用
- 【jQuery】(7)---jQueryAjax同步异步区别
- PHP如何读取json数据
- scws安装
- Zynq启动流程
- make 命令【转】
- element UI实现表格中添加开关控制按钮
- VS2012 安装番茄插件
- Data_Structure04-树
- HTML5 本地存储+layer弹层组件制作记事本
- NEU 	 1495 a interesting game 大数 难度:1
- UIView中的tintColor和renderingMode