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

滚动到顶部：

 代码如下 复制代码

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

滚动到指定位置：

 代码如下 复制代码

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

示例演示地址效果

源码参考：

 代码如下 复制代码

<!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.111cn.net/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.111cn.net 产品介绍产品介绍产品介绍产品介绍产品介绍产品介绍产品介绍产品介绍产品介绍产品介绍产品介绍</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

 

时间： 2024-10-02 13:17:52

javascript平滑滚动到顶部,底部,指定地方的相关文章

jquery滚动到顶部底部代码

以下是jquery滚动到顶部底部代码的介绍,希望对你有帮助. jquery滚动到顶部底部是一款简单的滚动到顶部底部控制.是一个很实用的功能,他能帮助新手和高级开发者们创造美好的用户体验.这里推荐给大家,有需要的小伙伴可以参考下. HTML ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 <!doctype html> <html lang="en"> <head> <meta charset="UTF

不用锚点也可以平滑滚动到页面的指定位置实现代码_jquery

不用锚点也可以平滑滚动到页面的指定位置 复制代码 代码如下: <!DOCTYPE html> <html > <head> <meta content="text/html; charset=utf-8" /> <title>ScrollTo:平滑滚动到页面指定位置</title> <link rel="stylesheet" type="text/css" href=

基于jquery平滑滚动“返回顶部”效果

 代码如下 复制代码 <!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> <title>点击平滑滚动&quo

jquery滚动到顶部底部代码_jquery

HTML <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>图片预加载</title> <link rel="stylesheet" type="text/css" href="css/index.css"> <script ty

js控制滚动条缓慢滚动到顶部

<html> <head> <script type="text/javascript"> var currentPosition,timer; function GoTop(){ timer=setInterval("runToTop()",1); } function runToTop(){ currentPosition=document.documentElement.scrollTop || document.body.

jQuery定位锚平滑滚动代码

注:jQuery代码,需要jQuery库才能运行    代码如下 复制代码 $(function(){     $('a[href*=#]').click(function() {     if (location.pathname.replace(/^//,'') == this.pathname.replace(/^//,'')         && location.hostname == this.hostname) {             var $target = $(th

jQuery实现平滑滚动到指定锚点的方法

 这篇文章主要介绍了jQuery实现平滑滚动到指定锚点的方法,实例分析了jQuery根据锚点定位滚动的技巧,非常具有实用价值,需要的朋友可以参考下     本文实例讲述了jQuery实现平滑滚动到指定锚点的方法.分享给大家供大家参考.具体如下: 定义好指定的anchor锚点,调用下面的js代码可以让页面平滑的滚动到指定的位置,非常实用,比如返回页面顶部,去往页面底部等功能 ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 // HTML: // <h1 id="anch

jQuery实现平滑滚动到指定锚点的方法_jquery

本文实例讲述了jQuery实现平滑滚动到指定锚点的方法.分享给大家供大家参考.具体如下: 定义好指定的anchor锚点,调用下面的js代码可以让页面平滑的滚动到指定的位置,非常实用,比如返回页面顶部,去往页面底部等功能 // HTML: // <h1 id="anchor">Lorem Ipsum</h1> // <p><a href="#anchor" class="topLink">Back t

jQuery实现指定内容滚动同时左侧或其它地方不滚动的方法_jquery

本文实例讲述了jQuery实现指定内容滚动同时左侧或其它地方不滚动的方法.分享给大家供大家参考.具体如下: 本效果可实现左上角Logo的置顶但不滚动,而文字也就是网页主体区滚动,当用户拖动滚动条的时候可看到此效果,例子挺简单. 先看一下运行效果截图: 具体代码如下: <!DOCTYPE html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8&qu