转载自：http://www.daixiaorui.com/read/92.html
js平滑滚动到顶部,底部,指定地方
在线演示：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>
相关推荐
总结起来，`smoothscroll.js`是一个纯JavaScript实现的页面平滑滚动插件，它扩展了`window`对象，使得开发者能够方便地在不依赖额外库的情况下实现平滑滚动效果。理解其工作原理和使用方式，对于提升网页交互的用户...
在网页设计中，提供一个简单易用的滚动到顶部或底部的控制功能是提升用户体验的重要方式之一。jQuery库因其简洁的API和丰富的功能，成为实现此类功能的理想选择。本篇文章将详细讲解如何使用jQuery实现滚动到顶部和...
3. 为了提高用户体验，可以添加平滑滚动效果，使页面缓缓滚动到顶部。 ```javascript function smoothScrollTop() { const scrollPosition = window.pageYOffset; const duration = 500; // 滚动持续时间，单位...
总结一下，本文主要介绍了如何使用JavaScript实现页面“返回顶部”的功能，并提供了实现平滑滚动的代码示例。通过结合HTML、CSS和JavaScript，我们可以为用户提供更加友好的交互体验，使得页面的返回顶部操作既直观...
在实际项目中，这个特效的集成并不复杂，开发者只需要将提供的代码文件（可能包括HTML、CSS和JavaScript文件）引入到网页中，然后根据自己的需求进行适当的定制，如更改返回顶部图标的样式，调整平滑滚动的速度等。...
<title>js平滑滚动到顶部、底部、指定地方 <script type="text/javascript" src="***"> .box { height: 200px; width: 100%; background: #ccc; margin: 10px 0; } .location { position: fixed; right...
这个“js返回顶部/底部demo Jquery返回顶部/底部案例”是一个示例，展示了如何使用JavaScript和jQuery库来实现这样的功能。在这个案例中，我们将深入探讨如何使用HTML、CSS和JavaScript/jQuery来创建这些实用的交互...
Vue.js 是一款流行的前端JavaScript框架，Vue-seamless-scroll 就是专为Vue.js设计的实现无限平滑滚动效果的插件。 该插件的主要功能是将长列表分块加载，只在用户滚动到可视区域附近时加载相应的数据块，从而提高...
在网页设计中，"返回顶部"功能是一个常见且实用的设计元素，它允许用户轻松地将浏览器滚动到页面的顶部，特别是在浏览长页面时。本文将详细介绍如何使用jQuery实现平滑的返回顶部效果，并确保该功能在古老的Internet...
首先，为返回顶部的按钮添加点击事件监听器，当用户点击该按钮时，使用`animate`方法平滑滚动到页面顶部： ```javascript $(document).ready(function() { $("#backToTop").click(function() { $("html, body")....
这段代码定义了一个`smoothScrollToBottom`函数，接受一个DOM元素作为参数，然后通过`requestAnimationFrame`平滑地滚动到该元素的底部。当有新消息时，触发`newMessage`自定义事件，调用这个函数即可。 以上就是...
3. **动画效果**: 使用`.animate()`函数来实现平滑滚动到顶部的效果。我们可以设定动画的持续时间、速度曲线等参数，让滚动过程更加自然。 示例代码： ```javascript $(document).ready(function(){ $("#toTop")....
为了增加用户体验，还可以添加平滑滚动效果，通过设置`scrollTo`的第三个参数为true来实现。 **3. 底部悬浮显示当前页数与总页数** 这个功能可以帮助用户了解他们当前浏览的位置在整个内容中的位置。iscroll本身并...
定义好指定的anchor锚点，调用下面的js代码可以让页面平滑的滚动到指定的位置，非常实用，比如返回页面顶部，去往页面底部等功能 // HTML: // <h1 id=anchor>Lorem Ipsum // <p><a>Back to Top</a></p> $(document)...
// 800毫秒内平滑滚动到顶部 return false; // 阻止默认的链接行为 }); }); ``` 在这个例子中，`.back-to-top`是返回顶部按钮的CSS类名。当用户滚动页面超过100像素时，按钮会逐渐出现；点击按钮后，页面会在800...
在网页浏览时，用户可能需要快速回到页面顶部（例如，点击页面右下角的“返回顶部”按钮）或滚动到页面底部（如查看页面底部的评论或加载更多内容）。利用jQuery，我们可以优雅地实现这些功能，通过平滑的动画效果...
首先，平滑返回顶部特效的核心在于模拟浏览器的平滑滚动行为，通过连续调整页面的`scrollTop`属性来实现动画效果。在JavaScript中，我们可以利用`requestAnimationFrame`函数来实现这一过程。`requestAnimationFrame...
本文将详细介绍如何使用jQuery来创建一个页面可以平滑滚动至顶部或者底部的实现方法。 ### 知识点一：jQuery库的作用 jQuery是一个快速、小巧且功能丰富的JavaScript库。它封装了JavaScript中复杂的操作和功能，...
在本案例中，由于没有使用JavaScript，所以没有实现鼠标悬停时的平滑滚动效果。如果要实现这个效果，通常会使用JavaScript的`scrollTo`方法或者jQuery库的`animate`方法。例如，使用jQuery可以这样编写： ```...