jquery滚动到顶部底部js代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jquery滚动到顶部底部js代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!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 content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>jquery滚动到顶部底部</title>
<!--<link href="http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300,700" rel="stylesheet" type="text/css" />-->
<script src="js/jquery-latest.min.js" type="text/javascript"></script>
<script src="js/dwsee.top.bottom.menu.min.js" type="text/javascript"></script>
<link href="css/dwsee.top.bottom.menu.css" rel="stylesheet" type="text/css" />
<style type="text/css">
body {
	font-family: 'Roboto Condensed', sans-serif;
	margin: 0;
}
a{
	color:#FF2250;
}
.px980 {
	width: 980px;
	height: auto;
	margin: auto;
}
#logo {
	margin-top: 10px;
	width: 370px;
	float: left;
	height: 85px;
}
.menu {
	margin-top: 10px;
	width: 610px;
	float: left;
	height: 85px;
	line-height: 85px;
	text-align: right;
}
.menu a {
	font-family: 'Open Sans Condensed', sans-serif;
	font-size: 22px;
	color: #f72650;
	text-decoration: none;
	margin-right: 30px;
}
.menu a:hover {
	color: #FA7C96;
}
.short-text {
	height: 100px;
	line-height: 100px;
	background-color: #fdf7e7;
	margin-top: 20px!important;
	font-family: 'Open Sans Condensed', sans-serif;
	font-size: 40px;
}
.tableSpec {
	border-collapse: collapse;
	font-size: 12px;
	font-family: Arial, Helvetica, sans-serif;
}
.tableSpec td {
	border: 1px solid #dedede;
	padding: 8px;
}
.tableSpec thead td {
	background: #f7f7f7;
}
.auto-style1 {
	color: #800000;
}

.searchbutton {
	-moz-box-shadow:inset 0px 1px 0px 0px #ffffff;
	-webkit-box-shadow:inset 0px 1px 0px 0px #ffffff;
	box-shadow:inset 0px 1px 0px 0px #ffffff;
	background-color:#ededed;
	border:1px solid #dcdcdc;
	display:inline-block;
	color:#777777;
	font-family:arial;
	font-size:13px;
	font-weight:normal;
	padding:8px 21px;
	text-decoration:none;
	text-shadow:1px 1px 0px #ffffff;
}.searchbutton:hover {
	background-color:#dfdfdf;
}.searchbutton:active {
	position:relative;
	top:1px;
}</style>


<script type="text/javascript">

$(document).ready(function() {

	$(this).dwseeTopBottomMenu()

})
</script>

</head>

<body>

<div class="TopBottomMenu">
	<ul>
		<li><a href="">Home Page</a></li>
		<li><a href="">Company</a></li>
		<li><a href="">Products</a></li>
		<li><a href="">Our Technologies</a></li>
		<li><a href="">Quality</a></li>
		<li><a href="">H &amp; R</a></li>
		<li><a href="">Contact</a></li>
	</ul>
</div>

<br style="	clear:both;"/>
<div class="short-text">
<div class="px980">
	Scroll to Top - Bottom Control / <span>Documentation</span>
</div>
</div>

<div class="px980" style="margin-top:10px;font-family: 'Open Sans Condensed', sans-serif;font-size:20px;">
<h3>概况</h3>
<p>这是一个简单的滚动到顶部底部控制jQuery插件。是一个很实用的功能，他能帮助新手和高级开发者们创造美好的用户体验。</p>

<h3>Demos</h3>
Select position : <a href="javascript://" onclick="$('#top-bottom-menu').remove();$(this).dwseeTopBottomMenu({'position':'left'})">Left</a> <a href="javascript://" onclick="$('#top-bottom-menu').remove();$(this).dwseeTopBottomMenu({'position':'right'})">Right</a><br/>
Change icon		: <a href="javascript://" onclick="$('#top-bottom-menu').remove();$(this).dwseeTopBottomMenu({'boxsize':60,'topicon':'images/sq_br_up_icon.png','menuicon':'images/2x2_grid_icon.png','bottomicon':'images/sq_br_down_icon.png'})">Change</a> <a href="javascript://" onclick="$('#top-bottom-menu').remove();$(this).dwseeTopBottomMenu({'boxsize':60,'topicon':'images/direction_up.png','menuicon':'images/manage.png','bottomicon':'images/direction_down.png','position':'left'})">Change</a><br/>
Change Background color		: <a href="javascript://" onclick="$('#top-bottom-menu').remove();$(this).dwseeTopBottomMenu({'boxbackground':'#f72650'})">Change</a><br/>
Change menu content : <a href="javascript://" onclick="$('#top-bottom-menu').remove();$(this).dwseeTopBottomMenu({'boxsize':60,'openmenusize':700,'menucontainer':'.searchBox'})">Change</a>

<div class="searchBox" style="display:none;text-align:left;margin-left:10px;">
The search engine that helps you find exactly what you're looking for.<input type="text" style="margin-left:10px;width:140px;padding:6px" placeholder="search image, video etc." /> <input type="submit" value="search" class="searchbutton"/>
</div>

<h3>
Full Customize
</h3>
<code>$(<span style="color: blue">this</span>).dwseeTopBottomMenu ({<br />
		<div style="color: #800000; padding-left: 40px;">
			'menucontainer'			: '.TopBottomMenu',<br/>
			'boxsize'				: 40,<br/>
			'boxbackground'			: '#ffffff',<br/>
			'position'				: 'right',<br/>
			'openmenusize'			: 500,<br/>
			'topicon'				: 'images/up_arrow.png',<br/>
			'menuicon'				: 'images/menu_icon.png',<br/>
			'bottomicon'			: 'images/down_arrow.png'<br/>
		</div>
		}) 
<br/><br />
	<strong>Menu Container Html</strong><br />
	<pre style="color: rgb(0, 0, 0); font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; orphans: auto; text-align: start; text-indent: 0px; text-transform: none; widows: auto; word-spacing: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; margin: 0px; line-height: 16px;"><span style="color: rgb(0, 112, 0);">&lt;div</span> <span style="color: rgb(0, 0, 192);">class=</span><span style="background-color: rgb(255, 240, 240);">"TopBottomMenu"</span><span style="color: rgb(0, 112, 0);">&gt;</span>
<span style="color: rgb(0, 112, 0);">	&lt;ul&gt;</span>
<span style="color: rgb(0, 112, 0);">		&lt;li&gt;&lt;a</span> <span style="color: rgb(0, 0, 192);">href=</span><span style="background-color: rgb(255, 240, 240);">"#"</span><span style="color: rgb(0, 112, 0);">&gt;</span>Home Page<span style="color: rgb(0, 112, 0);">&lt;/a&gt;&lt;/li&gt;</span>
<span style="color: rgb(0, 112, 0);">		&lt;li&gt;&lt;a</span> <span style="color: rgb(0, 0, 192);">href=</span><span style="background-color: rgb(255, 240, 240);">"<code>#</code>"</span><span style="color: rgb(0, 112, 0);">&gt;</span>Company<span style="color: rgb(0, 112, 0);">&lt;/a&gt;&lt;/li&gt;</span>
<span style="color: rgb(0, 112, 0);">		&lt;li&gt;&lt;a</span> <span style="color: rgb(0, 0, 192);">href=</span><span style="background-color: rgb(255, 240, 240);">"<code>#</code>"</span><span style="color: rgb(0, 112, 0);">&gt;</span>Products<span style="color: rgb(0, 112, 0);">&lt;/a&gt;&lt;/li&gt;</span>
<span style="color: rgb(0, 112, 0);">		&lt;li&gt;&lt;a</span> <span style="color: rgb(0, 0, 192);">href=</span><span style="background-color: rgb(255, 240, 240);">"<code>#</code>"</span><span style="color: rgb(0, 112, 0);">&gt;</span>Our Technologies<span style="color: rgb(0, 112, 0);">&lt;/a&gt;&lt;/li&gt;</span>
<span style="color: rgb(0, 112, 0);">		&lt;li&gt;&lt;a</span> <span style="color: rgb(0, 0, 192);">href=</span><span style="background-color: rgb(255, 240, 240);">"<code>#</code>"</span><span style="color: rgb(0, 112, 0);">&gt;</span>Quality<span style="color: rgb(0, 112, 0);">&lt;/a&gt;&lt;/li&gt;</span>
<span style="color: rgb(0, 112, 0);">		&lt;li&gt;&lt;a</span> <span style="color: rgb(0, 0, 192);">href=</span><span style="background-color: rgb(255, 240, 240);">"<code>#</code>"</span><span style="color: rgb(0, 112, 0);">&gt;</span>H &amp; R<span style="color: rgb(0, 112, 0);">&lt;/a&gt;&lt;/li&gt;</span>
<span style="color: rgb(0, 112, 0);">		&lt;li&gt;&lt;a</span> <span style="color: rgb(0, 0, 192);">href=</span><span style="background-color: rgb(255, 240, 240);">"<code>#</code>"</span><span style="color: rgb(0, 112, 0);">&gt;</span>Contact<span style="color: rgb(0, 112, 0);">&lt;/a&gt;&lt;/li&gt;</span>
<span style="color: rgb(0, 112, 0);">	&lt;/ul&gt;</span>
<span style="color: rgb(0, 112, 0);">&lt;/div&gt;</span></pre>
	<br /></code>
	<br />
	<br/>
	<table  class="tableSpec" cellspacing="0">
	<thead>
		<tr>
			<td class="auto-style1">Parameter</td>
			<td>Description</td>
			<td>Default</td>
			<td>Options</td>
		</tr>
</thead>		
		<tr>
			<td class="auto-style1"><code>menucontainer</code></td>
			<td>menu bar content container</td>
			<td>.TopBottomMenu</td>
			<td>-</td>

		</tr>
		<tr>
			<td class="auto-style1"><code>boxsize</code></td>
			<td>all box size (width / height)</td>
			<td>40</td>
			<td>integer</td>

		</tr>
		<tr>
			<td class="auto-style1"><code>boxbackground</code></td>
			<td>all box background color</td>
			<td>#ffffff</td>
			<td>all hex color (#000000)</td>

		</tr>
		<tr>
			<td class="auto-style1"><code>position</code></td>
			<td>Scroll to Top - Bottom Control</td>
			<td>right</td>
			<td>left / right</td>

		</tr>
		<tr>
			<td class="auto-style1"><code>openmenusize</code></td>
			<td>opened menu bar width</td>
			<td>500</td>
			<td>integer</td>

		</tr>
		<tr>
			<td class="auto-style1"><code>topicon</code></td>
			<td>top button icon</td>
			<td>images/up_arrow.png</td>
			<td>-</td>

		</tr>
		<tr>
			<td class="auto-style1"><code>menuicon</code></td>
			<td>menu button icon</td>
			<td>images/menu_icon.png</td>
			<td>-</td>

		</tr>
		<tr>
			<td class="auto-style1"><code>bottomicon</code></td>
			<td>bottom buton icon</td>
			<td>imagesdown_arrow.png</td>
			<td>-</td>

		</tr>
		</table>
</div>
<img src="images/2x2_grid_icon.png" style="display:none"/>
<img src="images/sq_br_up_icon.png" style="display:none" />
<img src="images/sq_br_down_icon.png"  style="display:none"/>
<img src="images/direction_up.png" style="display:none"/>
<img src="images/direction_down.png" style="display:none" />
<img src="images/manage.png"  style="display:none"/>
</body>
</html>

JS代码(dwsee.top.bottom.menu.min.js):

(function(\u0024){
	\u0024.\u0066\u006e.\u0064\u0077\u0073\u0065\u0065\u0054\u006f\u0070\u0042\u006f\u0074\u0074\u006f\u006d\u004d\u0065\u006e\u0075=function(\u006f\u0070\u0074\u0069\u006f\u006e\u0073){
	var \u0073\u0065\u0074\u0074\u0069\u006e\u0067\u0073=\u0024.\u0065\u0078\u0074\u0065\u006e\u0064({
	'menucontainer':'.TopBottomMenu','boxsize':40,'boxbackground':'#ffffff','position':'right','openmenusize':500,'topicon':'images/up_arrow.png','menuicon':'images/menu_icon.png','bottomicon':'images/down_arrow.png'}
,\u006f\u0070\u0074\u0069\u006f\u006e\u0073);
	\u0024('body').\u0070\u0072\u0065\u0070\u0065\u006e\u0064('<div id="top-bottom-menu"><div id="dstbm-top"></div><div id="dstbm-menu"> <div id="dstbmmenu"></div></div><div id="dstbm-bottom"></div></div>');
	\u0024(\u0073\u0065\u0074\u0074\u0069\u006e\u0067\u0073.\u006d\u0065\u006e\u0075\u0063\u006f\u006e\u0074\u0061\u0069\u006e\u0065\u0072).\u0063\u006c\u006f\u006e\u0065().\u0061\u0070\u0070\u0065\u006e\u0064\u0054\u006f('#dstbmmenu');
	\u0024(\u0073\u0065\u0074\u0074\u0069\u006e\u0067\u0073.\u006d\u0065\u006e\u0075\u0063\u006f\u006e\u0074\u0061\u0069\u006e\u0065\u0072).\u0068\u0069\u0064\u0065();
	\u0024("#dstbmmenu > "+\u0073\u0065\u0074\u0074\u0069\u006e\u0067\u0073.\u006d\u0065\u006e\u0075\u0063\u006f\u006e\u0074\u0061\u0069\u006e\u0065\u0072).\u0063\u0073\u0073("display","block");
	\u0024("#top-bottom-menu").\u0063\u0073\u0073("height",\u0073\u0065\u0074\u0074\u0069\u006e\u0067\u0073.\u0062\u006f\u0078\u0073\u0069\u007a\u0065+"px").\u0063\u0073\u0073("bottom",(\u0073\u0065\u0074\u0074\u0069\u006e\u0067\u0073.\u0062\u006f\u0078\u0073\u0069\u007a\u0065*2)+10+"px").\u0063\u0073\u0073("line-height",\u0073\u0065\u0074\u0074\u0069\u006e\u0067\u0073.\u0062\u006f\u0078\u0073\u0069\u007a\u0065+"px").\u0063\u0073\u0073(\u0073\u0065\u0074\u0074\u0069\u006e\u0067\u0073.\u0070\u006f\u0073\u0069\u0074\u0069\u006f\u006e,"10px");
	\u0024("#top-bottom-menu #dstbm-top").\u0063\u0073\u0073("height",\u0073\u0065\u0074\u0074\u0069\u006e\u0067\u0073.\u0062\u006f\u0078\u0073\u0069\u007a\u0065+"px").\u0063\u0073\u0073("width",\u0073\u0065\u0074\u0074\u0069\u006e\u0067\u0073.\u0062\u006f\u0078\u0073\u0069\u007a\u0065+"px").\u0063\u0073\u0073(\u0073\u0065\u0074\u0074\u0069\u006e\u0067\u0073.\u0070\u006f\u0073\u0069\u0074\u0069\u006f\u006e,"0").\u0063\u0073\u0073("background","url('"+\u0073\u0065\u0074\u0074\u0069\u006e\u0067\u0073.\u0074\u006f\u0070\u0069\u0063\u006f\u006e+"') center center no-repeat").\u0063\u0073\u0073("background-color",\u0073\u0065\u0074\u0074\u0069\u006e\u0067\u0073.\u0062\u006f\u0078\u0062\u0061\u0063\u006b\u0067\u0072\u006f\u0075\u006e\u0064);
	\u0024("#top-bottom-menu #dstbm-bottom").\u0063\u0073\u0073("height",\u0073\u0065\u0074\u0074\u0069\u006e\u0067\u0073.\u0062\u006f\u0078\u0073\u0069\u007a\u0065+"px").\u0063\u0073\u0073("width",\u0073\u0065\u0074\u0074\u0069\u006e\u0067\u0073.\u0062\u006f\u0078\u0073\u0069\u007a\u0065+"px").\u0063\u0073\u0073(\u0073\u0065\u0074\u0074\u0069\u006e\u0067\u0073.\u0070\u006f\u0073\u0069\u0074\u0069\u006f\u006e,"0").\u0063\u0073\u0073("top",(\u0073\u0065\u0074\u0074\u0069\u006e\u0067\u0073.\u0062\u006f\u0078\u0073\u0069\u007a\u0065*2)+2+"px").\u0063\u0073\u0073("background","url('"+\u0073\u0065\u0074\u0074\u0069\u006e\u0067\u0073.\u0062\u006f\u0074\u0074\u006f\u006d\u0069\u0063\u006f\u006e+"') center center no-repeat").\u0063\u0073\u0073("background-color",\u0073\u0065\u0074\u0074\u0069\u006e\u0067\u0073.\u0062\u006f\u0078\u0062\u0061\u0063\u006b\u0067\u0072\u006f\u0075\u006e\u0064);
	\u0024("#top-bottom-menu #dstbm-menu").\u0063\u0073\u0073("height",\u0073\u0065\u0074\u0074\u0069\u006e\u0067\u0073.\u0062\u006f\u0078\u0073\u0069\u007a\u0065+"px").\u0063\u0073\u0073("width",\u0073\u0065\u0074\u0074\u0069\u006e\u0067\u0073.\u0062\u006f\u0078\u0073\u0069\u007a\u0065+"px").\u0063\u0073\u0073(\u0073\u0065\u0074\u0074\u0069\u006e\u0067\u0073.\u0070\u006f\u0073\u0069\u0074\u0069\u006f\u006e,"0").\u0063\u0073\u0073("top",(\u0073\u0065\u0074\u0074\u0069\u006e\u0067\u0073.\u0062\u006f\u0078\u0073\u0069\u007a\u0065+1)+"px").\u0063\u0073\u0073("background","url('"+\u0073\u0065\u0074\u0074\u0069\u006e\u0067\u0073.\u006d\u0065\u006e\u0075\u0069\u0063\u006f\u006e+"') center center no-repeat").\u0063\u0073\u0073("background-color",\u0073\u0065\u0074\u0074\u0069\u006e\u0067\u0073.\u0062\u006f\u0078\u0062\u0061\u0063\u006b\u0067\u0072\u006f\u0075\u006e\u0064);
	\u0024(\u0077\u0069\u006e\u0064\u006f\u0077).\u0073\u0063\u0072\u006f\u006c\u006c(function(){
	var \u0070\u006f\u0073=\u0024(\u0077\u0069\u006e\u0064\u006f\u0077).\u0068\u0065\u0069\u0067\u0068\u0074()/2;
	if(\u0024(\u0077\u0069\u006e\u0064\u006f\u0077).\u0073\u0063\u0072\u006f\u006c\u006c\u0054\u006f\u0070()>200){
	\u0024("#dstbm-top").\u0066\u0061\u0064\u0065\u0049\u006e("slow")}
else{
	\u0024("#dstbm-top").\u0066\u0061\u0064\u0065\u004f\u0075\u0074("slow")}
if((\u0024(\u0077\u0069\u006e\u0064\u006f\u0077).\u0068\u0065\u0069\u0067\u0068\u0074()+\u0024(\u0077\u0069\u006e\u0064\u006f\u0077).\u0073\u0063\u0072\u006f\u006c\u006c\u0054\u006f\u0070())>=\u0024(\u0064\u006f\u0063\u0075\u006d\u0065\u006e\u0074).\u0068\u0065\u0069\u0067\u0068\u0074()){
	\u0024("#dstbm-bottom").\u0066\u0061\u0064\u0065\u004f\u0075\u0074("slow")}
else{
	\u0024("#dstbm-bottom").\u0066\u0061\u0064\u0065\u0049\u006e("slow")}
}
);
	\u0024("#dstbm-top").\u0063\u006c\u0069\u0063\u006b(function(){
	\u0024('html,body').\u0061\u006e\u0069\u006d\u0061\u0074\u0065({
	\u0073\u0063\u0072\u006f\u006c\u006c\u0054\u006f\u0070:'0'}
)}
);
	\u0024("#dstbm-bottom").\u0063\u006c\u0069\u0063\u006b(function(){
	\u0024('html,body').\u0061\u006e\u0069\u006d\u0061\u0074\u0065({
	\u0073\u0063\u0072\u006f\u006c\u006c\u0054\u006f\u0070:\u0024("body").\u0068\u0065\u0069\u0067\u0068\u0074()}
)}
);
	\u0024("#dstbm-menu").\u0063\u006c\u0069\u0063\u006b(function(){
	if(\u0024(this).\u0077\u0069\u0064\u0074\u0068()==\u0073\u0065\u0074\u0074\u0069\u006e\u0067\u0073.\u0062\u006f\u0078\u0073\u0069\u007a\u0065){
	\u0024("#dstbm-menu #dstbmmenu").\u0063\u0073\u0073("display","block");
	\u0024("#dstbm-menu").\u0063\u0073\u0073("background",\u0073\u0065\u0074\u0074\u0069\u006e\u0067\u0073.\u0062\u006f\u0078\u0062\u0061\u0063\u006b\u0067\u0072\u006f\u0075\u006e\u0064+" url('') center center no-repeat").\u0063\u0073\u0073("cursor","default");
	\u0024(this).\u0061\u006e\u0069\u006d\u0061\u0074\u0065({
	\u0077\u0069\u0064\u0074\u0068:\u0073\u0065\u0074\u0074\u0069\u006e\u0067\u0073.\u006f\u0070\u0065\u006e\u006d\u0065\u006e\u0075\u0073\u0069\u007a\u0065+"px"}
)}
}
);
	\u0024("#dstbm-menu").\u0068\u006f\u0076\u0065\u0072(function(){
}
,function(){
	if(\u0024(this).\u0077\u0069\u0064\u0074\u0068()==\u0073\u0065\u0074\u0074\u0069\u006e\u0067\u0073.\u006f\u0070\u0065\u006e\u006d\u0065\u006e\u0075\u0073\u0069\u007a\u0065){
	\u0024("#dstbm-menu #dstbmmenu").\u0063\u0073\u0073("display","block");
	\u0024("#dstbm-menu").\u0063\u0073\u0073("background",\u0073\u0065\u0074\u0074\u0069\u006e\u0067\u0073.\u0062\u006f\u0078\u0062\u0061\u0063\u006b\u0067\u0072\u006f\u0075\u006e\u0064+" url('') center center no-repeat").\u0063\u0073\u0073("cursor","pointer");
	\u0024(this).\u0061\u006e\u0069\u006d\u0061\u0074\u0065({
	\u0077\u0069\u0064\u0074\u0068:\u0073\u0065\u0074\u0074\u0069\u006e\u0067\u0073.\u0062\u006f\u0078\u0073\u0069\u007a\u0065+"px"}
,function(){
	\u0024("#dstbm-menu #dstbmmenu").\u0063\u0073\u0073("display","none");
	\u0024("#dstbm-menu").\u0063\u0073\u0073("background",\u0073\u0065\u0074\u0074\u0069\u006e\u0067\u0073.\u0062\u006f\u0078\u0062\u0061\u0063\u006b\u0067\u0072\u006f\u0075\u006e\u0064+" url('"+\u0073\u0065\u0074\u0074\u0069\u006e\u0067\u0073.\u006d\u0065\u006e\u0075\u0069\u0063\u006f\u006e+"') center center no-repeat")}
)}
}
)}
}
)(\u006a\u0051\u0075\u0065\u0072\u0079);

CSS代码(dwsee.top.bottom.menu.css):

#top-bottom-menu{font:9pt Arial,Helvetica,sans-serit;position:fixed;height:auto;text-align:center;}
#top-bottom-menu #dstbm-top{position:absolute;border:1px #cccccc solid;display:none;cursor:pointer;}
#top-bottom-menu #dstbm-menu{position:absolute;border:1px #cccccc solid;cursor:pointer;}
#top-bottom-menu #dstbm-menu:hover{/*width:500px;background:none;*/
}
#top-bottom-menu #dstbm-menu a{color:#000000;text-decoration:none;}
#top-bottom-menu #dstbm-menu a:hover{text-decoration:underline;}
/*#top-bottom-menu #dstbm-menu:hover ul{display:block;}
*/
#top-bottom-menu #dstbm-menu #dstbmmenu{display:none;}
#top-bottom-menu #dstbm-menu ul{list-style-type:none;padding:0px;margin:0px;}
#top-bottom-menu #dstbm-menu ul li{display:inline;padding-left:10px;}
#top-bottom-menu #dstbm-menu ul li:first-child{padding-left:0px;}
#top-bottom-menu #dstbm-bottom{position:absolute;border:1px #cccccc solid;cursor:pointer;}

附件:下载该文件资源,减少时间成本(增值服务)