代码如下:$("#feedbackContainer").scrollTop($("#feedbackContainer").height());
当一个页面内容很长的时候，侧边栏栏目可能显得太短，当窗口滑动到靠下的位置，则侧边即失去了展示内容的机会。很多新闻资讯类网站如新浪、网易、CSDN等，会在边栏的右下角以固定的小弹窗形式，以提供更多的内容展示方式，但这并不适合博客和web2.0风格的网站。 现在很多的独立博客和网站如人人网等，都使用了让侧边栏模块随滚动条滑动而位置固定的效果。就是当一个页面很长的时候，设定侧栏内容会跟随滚动条，这种效果适用于评论较...
先把下面的代码拷贝到个html中，运行看效果 代码如下:<html> <head> <script type="text/javascript"> var currentPosition,timer; function GoTop(){ timer=setInterval("runToTop()",1); } function runToTop(){ currentPosition=document.documentElement.scrollTop || document.body.scrollTop; currentPosition-=10; if(currentPosition>0) { window.scrollTo(0,currentPosition); } else { window.scrollTo(0,0); clearInte...
写了个js自制滚动条，首先，先看一下demo（点击这里） 先 有两个demo，右边那个黑色那个，是我一开始写的比较肤浅的代码：代码如下:var scrollself=(function(){ var scrollblock, //滚动块 scrollcontent, //被滚动的内容 scrollbar, //滚动条 scrollpanel, //滚动内容的滚动区域 cdistance, //滚动内容要滚动的距离 bdistance, //滚动块要滚动的距离 minuTop, //滚动条...
JS：代码如下:(function(win){ var doc = win.document,db = doc.body; var mousewheel = onmousewheel in document ? mousewheel : DOMMouseScroll; var skyScroll = function(opts){ return new skyScroll.prototype.init(opts);}; skyScroll.prototype = { constructor:skyScroll, //初始化 init:function(opts){ var set = _extend({ target:contentbox,...
主流浏览器默认为html元素提供的滚动条不美观，而且前端开发人员想对其通过css进行统一样式的美化也是不可实现的。比如ie可以通过样式来实现简单的美化、Webkit内核浏览器可以控制滚动条的显示效果，firefox则不允许用户为滚动条定义样式。但是对于追求友好的用户体验的前端开发人员，是不会被这些浏览器的不一致行为所阻止的。我们可以自己通过标准的html元素模拟来实现自定义的滚动条。 这里是自己在工作不太忙的时候写出来了一个...
问题：iframe 上下滚动条如何默认在下方，做的是聊天工具，数据多了，每次刷新出现的上下滚动默认在上方，还需下拉到下面才能看到聊天记录，有办法让它出现在下方吗? 答案：直接在iframe里写window.scrollTo(0,9999999)或者设置div等容器的scrollTop 代码如下:document.getElementById(“x”).scrollTop = document.getElementById(“x”).scrollHeight window.scrollTo(0,9999999) 这个是解决了在下方，但是有新信息后，滚动条不...
例如：淘宝商品详情里，滚动条往下来拉的时候，商品详情和评价那个nav会固定，现在很多网站也都有这样类似的效果，现在流行这个么?元芳,你怎么看?我也在网上找了找代码，屡试不爽啊，很多代码乱且没用。于是乎，我自己写一个，代码非常之简单，只有10几行，但遗憾的是，不兼容IE6，如果谁有兼容IE6的例子，还请指教。 直接贴下代码吧。 代码如下:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3....
核心代码： 代码如下:<script type="text/javascript" src="http://demo.jb51.net/jslib/jquery/jquery-1.7.2.min.js"></script> <script type="text/javascript"> $(function() { $(window).scroll(function() { var top = $(window).scrollTop()+200; var left= $(window).scrollLeft()+320; $("#editInfo").css({ left:left + "px", top: top + "px" }); }); }); </script> <div id="editInfo" style="float:left;width:300px;b...
代码如下:<html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title>拉动滚动条加载数据</title> <script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script> <script type="text/javascript"> $(function () { var i = 4;$(window).bind("scroll", function (event) { //滚动条到网页头部的 高度，兼容ie,ff,chrome var top = document.documentElement.scrollTop + document.body.scrollTop...
这是一个跟随滚动条漂浮的JS特效，就是说滚动条滚动而元素相对屏幕位置不变 网上有很多类似的效果，本代码比较起来有如下优点： 1. 兼容IE6.0+ & FF1.5+ 2. 使用非常简单，属于菜鸟最爱的那种拿来就能用的，见下面说明 3. 元素之间不会起冲突，一页中可以有n个特效，多元素使用无代码冗余 缺点有： 1. 只能在声明为xHTML的文档中使用 2. 元素最好放在body下 3. 滚动时不可避免的会有闪烁（已经比较轻微，但追求完美者可能觉得不爽）...
比如一个网页的聊天室，滚动条会随着内容的增加自动往下滚动。 当用户鼠标在滚动条上按下的时候，我们可以假设他（她）正在浏览聊天内容，那么这个时候好的用户体验就不能让滚动条再自动滚动了。 为了实现这个功能，可能大家首先会想到的就是mouse down 和 mouse up事件了。 可是具体实现的时候我们会发现在滚动条上按下鼠标左键再松开的时候，捕获不到mouse up了。如下面例子 代码如下:<html> <head> <title></title> <script ty...
这个比较简单，做个记录而已。 创建一个嵌套节点，让外层节点产生滚动条，然后用offsetWidth - clientWidth即可获得滚动条宽度。需要注意的是为了避免页面抖动，可以设置外层元素position:absolute和visibility:hidden 参考： 代码如下:function getScrollWith(){ var wrap = setAttributes(document.createElement(div),{ style : { width : 200px, height: 200px, overflow: auto, position:absolute, visibility:hidden } }) v...
虽然平滑性处理的不好，但非常适合学习 代码如下:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script> <script type="text/javascript"> //怎么获取网页的高度 让页面一出...
查找了很多方法，有些不能实现（被滚动内容的宽度未知，但使用这种方法必须已知），其它的不能完全兼容这些浏览器（IE6，Firefox，Chrome）。最后决定使用JQuery的Slider控件。 1. 下载jquery-1.3.2.min.js，jquery-ui-1.7.1.custom.min.js 2. Html 代码如下:<div id="topslider" runat="server"></div> <div id="scroll" runat="server"> <div id="holder"> 滚动内容 </div> <div id="bottomslider" style="margin-top:10px;marg...