jquery实现：页面上下滚动效果

最新推荐文章于 2024-06-11 15:23:22 发布

不断学习的ITer

最新推荐文章于 2024-06-11 15:23:22 发布

阅读量4.2k

点赞数

分类专栏： Jquery/Javascript

本文链接：https://blog.csdn.net/wyqlxy/article/details/38115743

版权

现在的网站流行一个很长的页面，通过滚动条上下移动，去查看各部分的信息。以下是我用代码简单实现下：

<!DOCTYPE HTML>
<meta charset='utf-8'>
<html>
<head>
<title>
页面上下滚动效果
</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
		 function getClientHeight() {
		     return document.documentElement.clientHeight+150;

		};

    $(document).ready(function(){

    	//重新设定页面高度：
    	$(".content").attr("height",document.documentElement.clientHeight);

		$('.navwrap .nav').click(function(event){
			var _self=this;
			var id =$(_self).attr('inx');
			$('.navwrap .nav').css("background-color","white");
			 $(_self).css("background-color","blue");
			$(window).scrollTop(parseInt(id)*getClientHeight());
			 event.preventDefault();
			 event.stopPro