判断滚动条到底部，需要用到DOM的三个属性值，即scrollTop、clientHeight、scrollHeight。 scrollTop为滚动条在Y轴上的滚动距离。 clientHeight为内容可视区域的高度。 scrollHeight为内容可视区域的高度加上溢出（滚动）的距离。 从这个三个属性的介绍就可以看出来，滚动条到底部的条件即为scrollTop + clientHeight == scrollHeight。 废话不多少说，赶紧上代码（兼容不同的浏览器）。 lazyload.js ? //滚动条在Y轴上的滚动距离 ...
网站在展示信息时，如果信息量过大，解决方法主要有三种。1.分页，将信息分页显示。2.整页显示，但是页面过长，影响浏览体验。3.使用滚动条，而默认滚动条样式太单一，用户体验不友好。所以我们需要美化滚动条。 美化滚动条最简单的方式就是使用jquery插件，本文介绍的就是jquery插件中的滚动条插件nanoscroller. 官方展示,样式可自定义1.nanoscroller插件功能 对内容实现滚动功能 2.nanoscroller官方地址 http://jamesflorentino....
nanoScrollerJS是一款使用简单方式实现 Mac OS X Lion 系统滚动条效果的jQuery插件。该滚动条插件使用最小的HTML结构 .nano > .nano-content 。其它的滚动条元素 .pane > .nano-slider 是在插件运行时动态加载的。该滚动条插件利用原生的滚动条可以工作在 iPad、iPhone 和一些 Android Tablets上。 使用方法 HTML结构 下面是该滚动条插件工作所必须的HTML结构：代码如下: <div id="about" class="nano"> <div class="nano-cont...
设置页面加载时滚动条自动滚到底的方法： jQuery：代码如下: $(function(){ var h = $(document).height()-$(window).height(); $(document).scrollTop(h); });JavaScript：代码如下: window.onload = function(){ var h = document.documentElement.scrollHeight || document.body.scrollHeight; window.scrollTo(h,h); }以上2种方法均可以实现页面加载时滚动条自动滚动到底，小伙伴们根据自己的实际需求，自由选择吧
今天给大家分享一款基于jquery固定于顶部的导航，这款导航当浏览器滚动条位于顶部时，导航高度较高，当浏览器滚动向下滚动时，导航高度自动减低，并位于顶部。效果图如下：源码下载 实现的代码： html代码： <div id="page"> <div id="toolbar" data-0="height:192px" data-128="height: 64px"> <div id="actions"> <div class="icon"> <svg viewbox="0 0 24 24" x="0px" y="0px" version="1.1" xmlns="http://www.w3.org/2000/svg...
@*点击按钮页面刷新的时候 记住滚动条的位置*@ 代码如下:<script type="text/javascript"> window.onbeforeunload = function () { var scrollPos; if (typeof window.pageYOffset != undefined) { scrollPos = window.pageYOffset; } else if (typeof document.compatMode != undefined && document.compatMode != BackCompat) { scrollPos = document.documentElement.scrollTop; } else if (typeof document.body != undefined...
代码如下:<section> <article class="left"> <p> </p> <ul> <li><a href="http://freejs.net/article_jquerywenzi_149.html" title="Ajax 动态加载内容">Ajax 动态加载内容</a></li> <li><a href="http://freejs.net/article_jquerywenzi_148.html" title="jquery 弹出层 弹窗">jquery 弹出层 弹窗</a></li> <li><a href="http://freejs.net/article_jquerywenzi_147.html" title="php文件管理，可以点击按照时间，大小，名称排序"...
这里有一个方法可以将DIV的滚动条滚动到其子元素所在的位置，方便自动定位。 代码如下:var container = $(div), scrollTo = $(#row_8); container.scrollTop( scrollTo.offset().top - container.offset().top + container.scrollTop() ); // Or you can animate the scrolling: container.animate({ scrollTop: scrollTo.offset().top - container.offset().top + container.scrollTop() });? 不需要任何JQuery插件即可完成所需...
jquery在scroll()事件里面，我想判断当前滚动条横向还纵向；我开始用全局变量记录scrollTop的值来判断的，如果前后值没有变就是横向滚动了，但是页面里有多个滚动条，就要多个全局变量来控制，该怎么判断呢？scroll jquery 区分横向纵向滚动条 解决方法：each一次设置选择器选中对象的scrollLeft/scrollTop就行了，然后绑定scroll事件，触发的时候获取scrollLeft/scrollTop和初始化的scrollLeft/scrollTop对比判断是横向还是纵向，...
scroll事件适用于window对象，但也可滚动iframe框架与CSS overflow属性设置为scroll的元素。 代码如下:$(document).ready(function () { //本人习惯这样写了 $(window).scroll(function () { //$(window).scrollTop()这个方法是当前滚动条滚动的距离 //$(window).height()获取当前窗体的高度 //$(document).height()获取当前文档的高度 var bot = 50; //bot是底部距离的高度 if ((bot + $(w...
代码如下:$(document).height() //是获取整个页面的高度$(window).height() //是获取当前也就是浏览器所能看到的页面的那部分的高度。这个大小在你缩放浏览器窗口大小时会改变，与document是不一样的要获取顶端，只需要获取到scrollTop()==0的时候就是顶端； 要获取底端，只要获取scrollTop()>=$(document).height()-$(window).height() 就可以知道已经滚动到底端了； 代码如下:$(document).scrollTop() 获取垂直滚动的距离 即...
部分购物网站用这个功能放购物车或商品分类导航，使产品页面很长的时候，侧边栏能始终固定发挥它应有的作用，有的网站用这个功能来边栏的广告。 jQuery代码： 代码如下:var rollSet = $(#Roll);// 检查对象，#sidebar-tab是要随滚动条固定的ID，可根据需要更改var offset = rollSet.offset();$(window).scroll(function () { // 检查对象的顶部是否在游览器可见的范围内 var scrollTop = $(window).scrollTop(); if(offset.top < s...
实现代码: 代码如下:<script type="text/javascript">var rollSet = $(#widget); var offset = rollSet.offset(); var fwidth = $("#footer").height(); $(window).scroll(function() { var scrollTop = $(window).scrollTop(); var scrollBtm = $(document).height() - $(window).scrollTop() - $("#widget").height(); if (offset.top < scrollTop) { if (scrollBtm > fwidth) { ...
最近在做一个项目，功能已经实现，突然用户要求表头是浮动的（因为内容在同一页面展示，当滚动时，看不到列头）。由于功能已经实现使用jquery+纯html，为了改动少只能使用jquery原生态实现滚动。 html表头代码： 代码如下:<tr class="header" > <td width="150" style="border-bottom:0px;"> </td> <td colspan="2" style="border-bottom:0px;"> </td> <td colspan="7">师资力量</td> <td colspan="14">科研</td> <td style="bord...
代码如下:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>自定义滚动条插件</title><style type="text/css"><!--html,body{height:100%;}body {margin:0; padding:0; background:#111 url(mcs_demo_bg.jpg) no-repe...