JS或者jquery設置滾動條回到頂部的方法：
目前創(chuàng)新互聯(lián)已為近千家的企業(yè)提供了網(wǎng)站建設、域名、虛擬主機、網(wǎng)站運營、企業(yè)網(wǎng)站設計、慶城網(wǎng)站維護等服務，公司將堅持客戶導向、應用為本的策略，正道將秉承"和諧、參與、激情"的文化，與客戶和合作伙伴齊心協(xié)力一起成長，共同發(fā)展。
返回頂部：設置為body的scrollTop為0 ?
滑動效果：animate（Jquery的自定義動畫）
備注：returnTop為觸發(fā)返回頂部的元素ID。
JavaScript一種直譯式腳本語言，是一種動態(tài)類型、弱類型、基于原型的語言，內(nèi)置支持類型。它的解釋器被稱為JavaScript引擎，為瀏覽器的一部分，廣泛用于客戶端的腳本語言，最早是在HTML（標準通用標記語言下的一個應用）網(wǎng)頁上使用，用來給HTML網(wǎng)頁增加動態(tài)功能。
jQuery是一個快速、簡潔的JavaScript框架，是繼Prototype之后又一個優(yōu)秀的JavaScript代碼庫（或JavaScript框架）。jQuery設計的宗旨是“write Less，Do More”，即倡導寫更少的代碼，做更多的事情。它封裝JavaScript常用的功能代碼，提供一種簡便的JavaScript設計模式，優(yōu)化HTML文檔操作、事件處理、動畫設計和Ajax交互。
jQuery的核心特性可以總結(jié)為：具有獨特的鏈式語法和短小清晰的多功能接口；具有高效靈活的css選擇器，并且可對CSS選擇器進行擴展；擁有便捷的插件擴展機制和豐富的插件。jQuery兼容各種主流瀏覽器，如IE 6.0+、FF 1.5+、Safari 2.0+、Opera 9.0+等。
jquery上下翻頁插件實現(xiàn)（js文件引用需要修改）
!DOCTYPE?html?PUBLIC?"-//W3C//DTD?XHTML?1.0?Transitional//EN"?""
html?xmlns=""
head
meta?http-equiv="Content-Type"?content="text/html;?charset=gb2312"?/
title用jQuery插件實現(xiàn)的滾屏效果,帶上下翻頁控制按鈕CsrCode.Cn/title
style?type="text/css"
ul,li{margin:0;padding:0}
#scrollDiv{width:300px;height:100px;min-height:25px;line-height:25px;border:#ccc?1px?solid;overflow:hidden}
#scrollDiv?li{height:25px;padding-left:10px;}
/style
script?type="text/javascript"?src="/js/jquery1.3.2.js"/script
script?type="text/javascript"
(function($){
$.fn.extend({
Scroll:function(opt,callback){
//參數(shù)初始化
if(!opt)?var?opt={};
var?_btnUp?=?$("#"+?opt.up);//Shawphy:向上按鈕
var?_btnDown?=?$("#"+?opt.down);//Shawphy:向下按鈕
var?timerID;
var?_this=this.eq(0).find("ul:first");
var?lineH=_this.find("li:first").height(),?//獲取行高
line=opt.line?parseInt(opt.line,10):parseInt(this.height()/lineH,10),?//每次滾動的行數(shù)，默認為一屏，即父容器高度
speed=opt.speed?parseInt(opt.speed,10):500;?//卷動速度，數(shù)值越大，速度越慢（毫秒）
timer=opt.timer?//?parseInt(opt.timer,10):3000;?//滾動的時間間隔（毫秒）
if(line==0)?line=1;
var?upHeight=0-line*lineH;
//滾動函數(shù)
var?scrollUp=function(){
_btnUp.unbind("click",scrollUp);?//Shawphy:取消向上按鈕的函數(shù)綁定
_this.animate({
marginTop:upHeight
},speed,function(){
for(i=1;i=line;i++){???????????????????????????????????_this.find("li:first").appendTo(_this);
}
_this.css({marginTop:0});
_btnUp.bind("click",scrollUp);?//Shawphy:綁定向上按鈕的點擊事件
});
}
//Shawphy:向下翻頁函數(shù)
var?scrollDown=function(){
_btnDown.unbind("click",scrollDown);
for(i=1;i=line;i++){
_this.find("li:last").show().prependTo(_this);
}
_this.css({marginTop:upHeight});
_this.animate({
marginTop:0
},speed,function(){
_btnDown.bind("click",scrollDown);
});
}
//Shawphy:自動播放
var?autoPlay?=?function(){
if(timer)timerID?=?window.setInterval(scrollUp,timer);
};
var?autoStop?=?function(){
if(timer)window.clearInterval(timerID);
};
//鼠標事件綁定
_this.hover(autoStop,autoPlay).mouseout();
_btnUp.css("cursor","pointer").click(?scrollUp?).hover(autoStop,autoPlay);//Shawphy:向上向下鼠標事件綁定
_btnDown.css("cursor","pointer").click(?scrollDown?).hover(autoStop,autoPlay);
}???????
})
})(jQuery);
$(document).ready(function(){
$("#scrollDiv").Scroll({line:4,speed:500,timer:3000,up:"btn1",down:"btn2"});
});
/script
/head
body
p多行滾動演示：/p
div?id="scrollDiv"
ul
li
a??target="_blank"?href="#"
好漂亮十多個/a/li
li
a?title="CSS制作斜角上有背景圖片的Div層"?target="_blank"?href="#"
CSS制作斜角上有背景圖片的Div層/a/li
li
a?title="Js實現(xiàn)的層展開、層折疊效果，默認時候?qū)邮钦郫B的"?target="_blank"?href="#"
Js實現(xiàn)的層展開、層折疊效果，默認折疊/a/li
li
a?title="DIV始終固定在網(wǎng)頁右下角位置的CSS實現(xiàn)方法"?target="_blank"?href="#"
DIV固定在右下角位置的CSS實現(xiàn)方法/a/li
li
a?title="JavaScript未知高度元素的垂直居中的方法"?target="_blank"?href="#"
JavaScript未知高度元素的垂直居中的方法/a/li
li
a?title="漸變彩色的文字"?target="_blank"?href="#"
漸變彩色的文字/a/li
li
a?title="指定文字逐條顯示"?target="_blank"?href="#"
指定文字逐條顯示/a/li
li
a?title="滾動的標題欄"?target="_blank"?href="#"
滾動的標題欄/a/li
li
a?title="JS?4屏平滑滾動幻燈片特效"?target="_blank"?href="#"
JS?4屏平滑滾動幻燈片特效/a/li
li
a?title="圖片的無縫滾動（縱向、橫向）"?target="_blank"?href="#"
圖片的無縫滾動（縱向、橫向）/a/li
li
a?title="鼠標觸及帶邊框的菜單"?target="_blank"?href="#"
鼠標觸及帶邊框的菜單/a/li
li
a?title="比較實用的CSS控制鏈接顏色效果"?target="_blank"?href="#"
比較實用的CSS控制鏈接顏色效果/a/li
li
a?title="鼠標接觸或者離開圖片時，圖片大小會相應變化"?target="_blank"?href="#"
鼠標接觸或者離開圖片時，圖片大小會相應變化/a/li
li
a?title="特殊的鼠標懸停提示"?target="_blank"?href="#"
特殊的鼠標懸停提示/a/li
/ul
/div
span?id="btn2"向上翻頁/span
span?id="btn1"向下翻頁/span
/body
/html
本文實例講述了jQuery實現(xiàn)將div中滾動條滾動到指定位置的方法。分享給大家供大家參考，具體如下：
一、Js代碼：
onload
=
function
()
{
//初始化
scrollToLocation();
};
function
scrollToLocation()
{
var
mainContainer
=
$('#thisMainPanel'),
scrollToContainer
=
mainContainer.find('.son-panel:last');//滾動到div
id="thisMainPanel"中類名為son-panel的最后一個div處
//scrollToContainer
=
mainContainer.find('.son-panel:eq(5)');//滾動到div
id="thisMainPanel"中類名為son-panel的第六個處
//非動畫效果
//mainContainer.scrollTop(
//
scrollToContainer.offset().top
-
mainContainer.offset().top
+
mainContainer.scrollTop()
//);
//動畫效果
mainContainer.animate({
scrollTop:
scrollToContainer.offset().top
-
mainContainer.offset().top
+
mainContainer.scrollTop()
},
2000);//2秒滑動到指定位置
}
二、Html代碼：
div
id="thisMainPanel"
style="height:200px;overflow-y:
scroll;border:1px
solid
#f3f3f3;"
div
class="son-panel"我是類容區(qū)域-1/div
div
class="son-panel"我是類容區(qū)域-2/div
div
class="son-panel"我是類容區(qū)域-3/div
div
class="son-panel"我是類容區(qū)域-4/div
div
class="son-panel"
style="height:160px;"我是類容區(qū)域-5/div
div
class="son-panel"我是類容區(qū)域-6/div
div
class="son-panel"我是類容區(qū)域-7/div
div
class="son-panel"我是類容區(qū)域-8/div
/div
更多關(guān)于jQuery相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《jQuery常用插件及用法總結(jié)》、《jQuery常見經(jīng)典特效匯總》、《jQuery
form操作技巧匯總》、《jQuery操作json數(shù)據(jù)技巧匯總》、《jQuery擴展技巧總結(jié)》、《jQuery拖拽特效與技巧總結(jié)》、《jQuery表格(table)操作技巧匯總》、《jquery中Ajax用法總結(jié)》、《jQuery動畫與特效用法總結(jié)》及《jquery選擇器用法總結(jié)》
希望本文所述對大家jQuery程序設計有所幫助。
#section5,
#section5 .fp-slide,
#section5 .fp-tableCell,
footer,
footer .fp-slide,
footer .fp-tableCell
{
height: auto !important;
}
這個是頁面高度根據(jù)內(nèi)容高度變化的，
autoScrolling:false, 這個是關(guān)閉自動滾一整屏的。
重慶分公司
重慶分公司
