现在的位置: 首页 -> 前端学习 -> JS前端 -> js平滑滚动到顶部,底部,指定地方

js平滑滚动到顶部,底部,指定地方

2014-05-26 21:22评论数 1 ⁄ 被浏览 25549 views+

采用锚点进行页面中的跳转的确很方便,但是要想增加网页的效果,可以使用jquery中的animate,实现滚动的一个动作,慢慢的滚动到你想跳转到的位置,从而看起来会非常高大上。


滚动到顶部:


$('.scroll_top').click(function(){$('html,body').animate({scrollTop: '0px'}, 800);});


滚动到指定位置:


$('.scroll_a').click(function(){$('html,body').animate({scrollTop:$('.a').offset().top}, 800);});


示例演示地址:http://www.daixiaorui.com/Public/demo/js/scroll.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 http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>js平滑滚动到顶部、底部、指定地方</title>

<script type="text/javascript" src="http://www.daixiaorui.com/Public/js/jquery.min.js"></script>

<style>

.box{ height:200px; width:100%; background:#ccc; margin:10px 0;}

.location{ position:fixed; right:0; bottom:10px; width:20px; background:#FFC; padding:5px; cursor:pointer;color:#003};

</style>

</head>


<body>

<div class="box"></div>

<div class="box"></div>

<div class="box"></div>

<div class="box"></div>

<div class="box a">产品介绍产品介绍 http://www.daixiaorui.com 产品介绍产品介绍产品介绍产品介绍产品介绍产品介绍产品介绍产品介绍产品介绍产品介绍产品介绍</div>

<div class="box"></div>

<div class="box"></div>

<div class="box"></div>

<div class="box"></div>

<div class="box bottom"></div>


<div class="location">

 <p class="scroll_top">返回顶部</p>

 <p class="scroll_a">产品介绍</p>

 <p class="scroll_bottom">滑到底部</p>

</div>

<script type="text/javascript">

jQuery(document).ready(function($){

$('.scroll_top').click(function(){$('html,body').animate({scrollTop: '0px'}, 800);}); 

$('.scroll_a').click(function(){$('html,body').animate({scrollTop:$('.a').offset().top}, 800);});

$('.scroll_bottom').click(function(){$('html,body').animate({scrollTop:$('.bottom').offset().top}, 800);});

});

</script>

</body>

</html>

 

文章出自:http://www.daixiaorui.com/read/92.html 本站所有文章,除注明出处外皆为原创,转载请注明本文地址,版权所有。

分享到:

目前有 1 条评论  @我要评论

  1. 1楼yeti : 2015-09-20 12:24:37 评论说: @回复

    确实好用~~~

您的每一个评论都是对我的一份支持

 博客二维码

昵称 *

邮箱 *