代码笔记

jQuery创建平滑的页面滚动到顶部或底部

阅读

使用jQuery让您可以平滑的滚动到你的网页的顶部或底部,使用方法如下:

它是如何工作的 
首先在</ head>标签结束前加载jquery库: 

代码如下:


<script type="text/javascript" src="http://libs.baidu.com/jquery/1.3.2/jquery.min.js"></script>


到页面底部链接代码: 
<a href="#" class="scrollToBottom">Scroll to bottom</a>

 

到页面底部jQuery 代码如下:


<script type="text/javascript"> 
$(document).ready(function(){ 
// Scroll page to the bottom 
$('a.scrollToBottom').click(function(){ 
$('html, body, .content').animate({scrollTop: $(document).height()}, 300); 
return false; 
}); 
}) 
</script> 


它是如何工作的: 
第一行代码在页面加载之前执行 
$(document).ready(function(){当连接的.scrollToBottom类被点击的时候执行{}里面的动作 
$(document).ready(function(){ 
$('a.scrollToBottom').click(function(){ 
}); 
})在这个函数中,执行这个代码 
$('html, body').animate({scrollTop: $(document).height()}, 'slow'); 
return false;当一个链接被点击的代码将在函数内部运行,scrollTop的功能是使用平滑滚动效果。上面的代码将滚动到页面底部,使用窗口的高度,以确定底部高度。使用“slow”,“medium”和“fast”的速度控制,我使用了'slow。 
jQuery的滚动到顶部 
首先,插入一个链接到你的网页页脚部分,当被点击的jQuery代码将执行。动画的功能。是非常重要的,因为它是在jQuery中引用类的链接。 

到页面顶部链接: 
<a href="#" class="scrollToTop">Scroll to bottom</a>


jQuery 代码如下:
<script type="text/javascript"> 
$(document).ready(function(){ 
$('a.scrollToTop').click(function(){ 
$('html, body').animate({scrollTop:0}, 'slow'); 
return false; 
}); 
}) 
</script> 


它是如何工作的: 
当在页面加载类。scrollToTop的链接被点击时的jQuery将执行此 
$('html, body').animate({scrollTop:0}, 'slow'); 
return false;.animate()方法使我们能够创建任何数字的CSS属性的动画效果,scrollTop的功能设置为0,这代表了滚动条在最上方的位置,“slow”是指动画将运行的速度,在你会注意到这一行: 
<code>return false;</code>这可以防止的默认动作被触发的事件,在我们的例子中,它可以防止用户链接。
也可以这样: 

代码如下:


event.preventDefault(); 

 



推荐阅读

JQuery筛选器备忘
JQuery筛选器备忘
用jquery刷新当前页面方法
用jquery刷新当前页面方...
为jQuery添加“鼠标停止时
为jQuery添加“鼠标停止...
jquery原生文章内图片展示
jquery原生文章内图片展...