<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title> jquery实现模仿新浪的返回顶部 </title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js ">
//-->
</script>
<script type="text/javascript">
<!--
$(function(){
//开始先隐藏返回顶部的按钮
$(".goto").hide();
/*回到顶部*/
$(".goto").click(function(){
$("body").scrollTo("fast");
return false;
});
/*控制滚动条滚动插件*/
jQuery.fn.scrollTo = function(speed) {
var targetOffset = $(this).offset().top;
$('html,body').stop().animate({scrollTop: targetOffset}, speed);
return this;
};
/*回到顶部跟随滚动条滚动*/
var gotoscroll = $(".goto").offset().top + 350;
$(window).scroll(function (){
var vtop=$(this).scrollTop();
if(750>vtop){
return;
}
$(".goto").show();
var offsetTop = gotoscroll + $(window).scrollTop() +"px";
$(".goto").animate({top : offsetTop },{ duration:500 , queue:false }); }); })
</script>
<style type="text/css">
.goto {
background-color: #D4D0C8;
border: 1px solid #FFFFFF;
color: #0078B6;
}
.goto span {
display: block;
padding: 4px;
}
.goto {
border-radius: 3px 3px 3px 3px;
border:1px solid #ccc;
bottom: 100px;
display: block;
font-family: Arial;
left: 50%;
line-height: 20px;
margin-left: 476px;
padding: 5px 3px 0 0;
position: absolute;
text-align: center;
width: 20px;
}
a{
text-decoration:none;
}
</style>
</head>
<body>
<div class="outter">
<div class="inner">
<div class="content">
<div>
<img src="http://ww4.sinaimg.cn/bmiddle/70f7c889jw1dtmiunvnahj.jpg" border="0" alt=""/>
</div>
<div id="" class="">
<img src="http://ww3.sinaimg.cn/bmiddle/7112c07bjw1dtm7us4pwrj.jpg" border="0" alt=""/>
</div>
<a href="javascript:void(0);" class="goto"><span>返回顶部</span></a>
</div>
</div>
</div>
</body>
</html>
分享到：
分享到：
相关推荐
**jQuery 实现返回顶部功能详解** 在网页设计中，尤其是内容丰富的页面，用户滚动浏览到页面底部时，可能需要一个便捷的方式快速返回页面顶部。jQuery 提供了一个简单且高效的解决方案来实现这一功能，使得用户体验...
通过上述描述，我们明白了使用jQuery实现返回顶部功能不仅需要了解基本的HTML、CSS和JavaScript知识，还需要考虑浏览器的兼容性以及交互的用户体验。通过合理运用jQuery提供的方法，我们可以非常便捷地实现这个功能...
事件绑定是实现返回顶部功能的关键步骤之一。在文档加载完成后，我们需要绑定`resize`事件和`scroll`事件到窗口上，并对返回顶部按钮绑定点击事件，以便在触发这些事件时执行相应的函数。 知识点六：淡入淡出效果 ...
总结来说，利用jQuery实现返回顶部功能涉及到的主要知识点有：jQuery的选择器、事件处理、`scrollTop()`方法和`animate()`函数。通过这些技术，我们可以为用户提供一个直观且友好的界面交互，提升网站的用户体验。
总的来说，利用jQuery实现返回顶部功能是一个简单但有效的提升网页用户体验的方法。它结合了JavaScript的动态性与jQuery的便利性，使得开发者能快速实现这一常见功能，同时保持代码的简洁和可维护性。通过不断学习和...
在网页设计中，"返回顶部"功能是一个常见且实用的设计元素，它允许用户快速地将浏览焦点移回页面顶部，特别是在长页面...你可以参考这个案例，结合自己的需求进行修改和扩展，以实现符合自己网站风格的返回顶部功能。
jquery实现返回顶部按钮demo，利用简单的jquery动画，易于学习
...锚点的实现方式是通过一个`<a>`标签并赋予一...以上就是利用jQuery实现返回顶部功能的各个知识点，包括了HTML锚点的设置、CSS样式的布局和动画效果实现、JavaScript交互逻辑处理以及兼容性考虑和图像资源的使用技巧。
jQuery实现返回顶部功能 接下来，我们使用jQuery编写JavaScript代码来实现返回顶部的功能： ```javascript $(document).ready(function() { // 当滚动条距离顶部超过100px时显示返回顶部按钮 $(window).scroll...
使用jQuery实现返回顶部功能，可以大大减少代码量，提高可读性和可维护性。 以下是一个简单的jQuery实现返回顶部的步骤： 1. **添加jQuery库**：确保你的HTML文档引入了jQuery库。这通常通过在`<head>`标签内添加...
3. **jQuery实现返回顶部功能** 接下来，我们使用jQuery编写JavaScript代码，监听按钮点击事件，当按钮被点击时，让页面滚动到顶部： ```javascript $(document).ready(function() { $("#top-btn").click(function...
在网页设计中，提供一个平滑的返回顶部功能可以极大地提升用户体验，特别是在内容丰富的长页面中。本资源“jQuery平滑返回顶部代码.zip”提供了一种实现这一功能的方法，利用了广泛使用的JavaScript库jQuery。接下来...
总的来说，通过jQuery实现“返回顶部”功能是一个简单但实用的技巧，可以显著提升用户体验。结合HTML和CSS的自定义能力，你可以创建出符合自己网站风格的返回顶部按钮。希望这段源代码和解析能对你有所帮助，也鼓励...
要实现返回顶部的效果，我们需要以下步骤： 1. **引入jQuery库**：在HTML文件中，我们需要通过`<script>`标签引入jQuery库。通常，我们从CDN（内容分发网络）获取，以提高加载速度。例如： ```html ...
总的来说，jQuery提供了一种简单有效的方法来实现返回顶部功能，通过绑定事件、动画效果和自定义插件，我们可以为用户提供更加友好和流畅的浏览体验。在实际开发过程中，不断优化和调整这些细节，将有助于提升网站的...
本文将详细探讨如何使用JQuery实现返回顶部和底部的特效。 首先，我们需要在HTML文档中添加必要的结构。为了实现返回顶部的按钮，可以在页面底部添加一个锚点元素，例如： ```html <a id="top"></a> 返回顶部 ``` ...
以上就是一个基本的jQuery实现的回到顶部功能，包括隐藏按钮的设计。当用户向下滚动页面，按钮会自动出现；当用户将鼠标悬停在按钮上，它会改变背景色以提供更好的交互反馈；点击按钮时，页面会平滑地滚动回顶部。这...