求菜单上下滑动的代码，多谢
求菜单上下滑动的代码，谢谢
左边这个菜单很长估计有2000px以上，菜单显示时高度和窗体一样高，显示不全的点击上下滑动显示；
比如说第一页从div 0px->600px;第二页为600px->1200px，这样怎么操作？
或者点击每次上下滑动50px；，请问怎么实现；
更多0
------解决思路----------------------
用jquery直接写不就完了。。。。写了个很粗的，你再加上什么 overflow:hidden这些就可以用了。jquery自己去引哈，我这网不好引的自己目录下的。
[code=html
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<script src="./jquery.min.js" type="text/javascript"></script>
</head>
<body>
<div onclick="topScroll()" style="width:60px;height:30px;cursor:pointer;">top</div>
<div id="scrollDiv">
<ul>
<li>1111111111111111111</li>
<li>2222222222222222222</li>
<li>3333333333333333333</li>
<li>4444444444444444444</li>
<li>5555555555555555555</li>
<li>6666666666666666666</li>
<li>77777777777777777777</li>
</ul>
</div>
</body>
<script type="text/javascript">
var temp = -44;
function topScroll() {
if(temp > -44*4){
var m = temp+"px";
$("#scrollDiv").css({ marginTop: m });
temp +=-44;
}
}
</script>
</html>
][/code]
------解决思路----------------------
效果图：
代码：
index.html文件：
子页面leftMenu.html代码：
左边这个菜单很长估计有2000px以上，菜单显示时高度和窗体一样高，显示不全的点击上下滑动显示；
比如说第一页从div 0px->600px;第二页为600px->1200px，这样怎么操作？
或者点击每次上下滑动50px；，请问怎么实现；
更多0
------解决思路----------------------
用jquery直接写不就完了。。。。写了个很粗的，你再加上什么 overflow:hidden这些就可以用了。jquery自己去引哈，我这网不好引的自己目录下的。
[code=html
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<script src="./jquery.min.js" type="text/javascript"></script>
</head>
<body>
<div onclick="topScroll()" style="width:60px;height:30px;cursor:pointer;">top</div>
<div id="scrollDiv">
<ul>
<li>1111111111111111111</li>
<li>2222222222222222222</li>
<li>3333333333333333333</li>
<li>4444444444444444444</li>
<li>5555555555555555555</li>
<li>6666666666666666666</li>
<li>77777777777777777777</li>
</ul>
</div>
</body>
<script type="text/javascript">
var temp = -44;
function topScroll() {
if(temp > -44*4){
var m = temp+"px";
$("#scrollDiv").css({ marginTop: m });
temp +=-44;
}
}
</script>
</html>
][/code]
------解决思路----------------------
效果图：
代码：
index.html文件：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>子页面自动滚动测试</title>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<style>
#left{
width:200px;
height:500px;
background:green;
}
#menuFrame{
width:200px;
height:500px;
}
</style>
</head>
<script>
function up(){
var obj = window.frames["menuFrame"].document.body;
obj.scrollTop=obj.scrollTop + 100;
}
function down(){
var obj = window.frames["menuFrame"].document.body;
obj.scrollTop=obj.scrollTop - 100;
}
</script>
<body>
<div id="container">
<div id="left">
<!--scrolling放在css中不起作用？-->
<iframe name="menuFrame" id="menuFrame" src="./leftMenu.html" scrolling="no"></iframe>
</div>
<div>
<button type="button" onclick="up();">上</button>
<button type="button" onclick="down();">下</button>
</div>
</div>
</body>
</html>
子页面leftMenu.html代码：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>左侧菜单</title>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<style>
body{
height:2000px;
width:200px;
background:red;
}
</style>
</head>
<body>
<div id="container">
<ol>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
<li>11</li>
<li>12</li>
<li>13</li>
<li>14</li>
<li>15</li>
<li>16</li>
<li>17</li>
<li>18</li>
<li>19</li>
<li>20</li>
<li>21</li>
<li>22</li>
<li>23</li>
<li>24</li>
<li>25</li>
<li>26</li>
<li>27</li>
<li>28</li>
<li>29</li>
<li>30</li>
<li>31</li>
<li>32</li>
<li>33</li>
<li>34</li>
<li>35</li>
<li>36</li>
<li>37</li>
<li>38</li>
<li>39</li>
<li>40</li>
<li>41</li>
<li>42</li>
<li>43</li>
<li>44</li>
<li>45</li>
<li>46</li>
<li>47</li>
<li>48</li>
<li>49</li>
<li>50</li>
<li>51</li>
<li>52</li>
<li>53</li>
<li>54</li>
<li>55</li>
<li>56</li>
<li>57</li>
<li>58</li>
<li>59</li>
<li>60</li>
<li>61</li>
<li>62</li>
<li>63</li>
<li>64</li>
<li>65</li>
<li>66</li>
<li>67</li>
<li>68</li>
<li>69</li>
<li>70</li>
<li>71</li>
<li>72</li>
<li>73</li>
<li>74</li>
<li>75</li>
<li>76</li>
<li>77</li>
<li>78</li>
<li>79</li>
<li>80</li>
<li>81</li>
<li>82</li>
<li>83</li>
<li>84</li>
<li>85</li>
<li>86</li>
<li>87</li>
<li>88</li>
<li>89</li>
<li>90</li>
<li>91</li>
<li>92</li>
<li>93</li>
<li>94</li>
<li>95</li>
<li>96</li>
<li>97</li>
<li>98</li>
<li>99</li>
<li>100</li>
<li>101</li>
<li>102</li>
<li>103</li>
<li>104</li>
<li>105</li>
<li>106</li>
<li>107</li>
<li>108</li>
<li>109</li>
<li>110</li>
<li>111</li>
<li>112</li>
<li>113</li>
<li>114</li>
<li>115</li>
<li>116</li>
<li>117</li>
<li>118</li>
<li>119</li>
<li>120</li>
<li>121</li>
<li>122</li>
<li>123</li>
<li>124</li>
<li>125</li>
<li>126</li>
<li>127</li>
<li>128</li>
<li>129</li>
<li>130</li>
<li>131</li>
<li>132</li>
<li>133</li>
<li>134</li>
<li>135</li>
<li>136</li>
<li>137</li>
<li>138</li>
<li>139</li>
<li>140</li>
<li>141</li>
<li>142</li>
<li>143</li>
<li>144</li>
<li>145</li>
<li>146</li>
<li>147</li>
<li>148</li>
<li>149</li>
<li>150</li>
<li>151</li>
<li>152</li>
<li>153</li>
<li>154</li>
<li>155</li>
<li>156</li>
<li>157</li>
<li>158</li>
<li>159</li>
<li>160</li>
<li>161</li>
<li>162</li>
<li>163</li>
<li>164</li>
<li>165</li>
<li>166</li>
<li>167</li>
<li>168</li>
<li>169</li>
<li>170</li>
<li>171</li>
<li>172</li>
<li>173</li>
<li>174</li>
<li>175</li>
<li>176</li>
<li>177</li>
<li>178</li>
<li>179</li>
<li>180</li>
<li>181</li>
<li>182</li>
<li>183</li>
<li>184</li>
<li>185</li>
<li>186</li>
<li>187</li>
<li>188</li>
<li>189</li>
<li>190</li>
<li>191</li>
<li>192</li>
<li>193</li>
<li>194</li>
<li>195</li>
<li>196</li>
<li>197</li>
<li>198</li>
<li>199</li>
<li>200</li>
<li>201</li>
<li>202</li>
<li>203</li>
<li>204</li>
<li>205</li>
<li>206</li>
<li>207</li>
<li>208</li>
<li>209</li>
<li>210</li>
<li>211</li>
<li>212</li>
<li>213</li>
<li>214</li>
<li>215</li>
<li>216</li>
<li>217</li>
<li>218</li>
<li>219</li>
<li>220</li>
<li>221</li>
<li>222</li>
<li>223</li>
<li>224</li>
<li>225</li>
<li>226</li>
<li>227</li>
<li>228</li>
<li>229</li>
<li>230</li>
<li>231</li>
<li>232</li>
<li>233</li>
<li>234</li>
<li>235</li>
<li>236</li>
<li>237</li>
<li>238</li>
<li>239</li>
<li>240</li>
<li>241</li>
<li>242</li>
<li>243</li>
<li>244</li>
<li>245</li>
<li>246</li>
<li>247</li>
<li>248</li>
<li>249</li>
<li>250</li>
<li>251</li>
<li>252</li>
<li>253</li>
<li>254</li>
<li>255</li>
<li>256</li>
<li>257</li>
<li>258</li>
<li>259</li>
<li>260</li>
<li>261</li>
<li>262</li>
<li>263</li>
<li>264</li>
<li>265</li>
<li>266</li>
<li>267</li>
<li>268</li>
<li>269</li>
</ol>
</div>
</body>
</html>