jQuery实现简单而且很酷的返回顶部链接效果

demo:

html部分:

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<meta name="description" content="">

<meta name="keywords" content="">

<title>返回页面顶部</title>

<link rel="stylesheet" type="text/css" href="css/style.css">

<script type="text/javascript" src="../jquery/js/jquery-1.7.2.min.js"></script>

</head>

<body>

<p>1</p>

<br/>

<br/>

<br/>

<br/>

<br/>

<br/>

<br/>

<br/>

<br/>

<br/>

<br/>

<br/>

<br/>

<br/>

<br/>

<p>2</p>

<br/>

<br/>

<br/>

<br/>

<br/>

<br/>

<br/>

<br/>

<br/>

<br/>

<br/>

<br/>

<br/>

<br/>

<br/>

<p>3</p>

<br/>

<br/>

<br/>

<br/>

<br/>

<br/>

<br/>

<br/>

<br/>

<br/>

<br/>

<br/>

<br/>

<br/>

<br/>

<p>4</p>

<br/>

<br/>

<br/>

<br/>

<br/>

<br/>

<br/>

<br/>

<br/>

<br/>

<br/>

<br/>

<br/>

<br/>

<br/>

<p>5</p>

<br/>

<br/>

<br/>

<br/>

<br/>

<br/>

<br/>

<br/>

<br/>

<br/>

<br/>

<br/>

<br/>

<br/>

<br/>

<div id="back_to_top">

<a href="#">

<div>返回顶部</div>

<div>广告或图片部分</div>

</a>

</div>

<script type="text/javascript" src="js/returntop.js">

</script>

</body>

</html>

css样式:

#back_to_top {

position: fixed;

bottom: 100px;

right: 0px;

width: 100px;

height: 100px;

background: #ccc;

-moz-transition: background 1s;/*鼠标经过颜色渐变效果*/

-webkit-transition: background 1s;

-o-transition: background 1s

}

#back_to_top:hover {

background: #aaa;

}

js文件:

$(document).ready(function () {

$("#back_to_top").hide();//首先将#back-to-top隐藏

$(function () {

$(window).scroll(function () {

if ($(window).scrollTop() > 100) {//当滚动条的位置处于距顶部100像素以下时,跳转链接出现,否则消失

$("#back_to_top").fadeIn(1500);

} else {

$("#back_to_top").fadeOut(1500);

}

});

//点击后返回到顶部

$("#back-to-top").click(function () {

$(‘body,html‘).animate({

scrollTop: 0

}, 1000);

return false;

});

});

});

也可以在添加锚点链接

<body id="top">

<div id="back_to_top">

<a href="#top">

<div>返回顶部</div>

<div>广告或图片部分</div>

</a>

</div>

文章部分来自(飞鱼的声纳

时间: 2024-10-13 16:04:16

jQuery实现简单而且很酷的返回顶部链接效果的相关文章

扒皮下音悦台的“返回顶部”图标效果

昨晚想仿造下音悦台首页“返回顶部”的小超人效果,觉得这东西的实现很简单,应该不会费时超过一个钟.结果撸代码的过程发现存在很多意想不到的问题. 先发个图: 有兴趣的朋友可以去音悦台点一下这个小超人图标试一试,默认是隐藏的,滚动条下拉一小段距离后会从下面飞上来悬停在右下角,点击的时候不但浏览器滚动条会返回顶端,小超人也会往上飞到顶部消失掉. 不过我印象中,以前若鼠标移到图标上,小超人会变成一个动态(小超人的披风会摆动)的gif图,不过现在取消了这效果,可能是因为gif毕竟不是png,多少带有些锯齿影

简单几步实现返回顶部效果

今天与大家分享下网页中经常出现的返回顶部效果 相比原生Javascript,jquery实现起来能够省略不少代码. 接下来就直接贴代码啦: 1 $(function(){ 2 $(window).scroll(function(){ //scroll--浏览器滚动条滚动式触发 3 var wHeight=$(window).height(); //获取浏览器可视窗口高度 4 var wTop=$(window).scrollTop(); //获取滚动条距离顶部高度 5 if(wTop>=wHei

js返回顶部动画效果

// 返回顶部 function goTop(){ // 无动画效果 document.body.scrollTop = 0; document.documentElement.scrollTop = 0; // 简单动画效果 $("html,body").animate({scrollTop:0},500); // 由快到慢的效果 scrollToptimer = setInterval(function () { console.log("定时循环回到顶部")

仿新浪微博返回顶部的js实现(jQuery/MooTools)

一.引言 在web页面中,如果页面较高,为了方便用户快速地返回顶部,都会添加一个返回顶部按钮.例如: 其中淘宝网的是要滚动条的滚动距离大于某一段距离才显示返回顶部按钮:人人网的返回顶部直接在底部的工具条上:新浪微博的返回顶部在滚动高度大于0的时候显示,且返回顶部的效果是平滑动画效果.本文的实现就是类似于新浪微博的这种效果.//zxx:新浪微博今天启用新域名weibo.com了 二.jQuery下的返回顶部功能 您可以狠狠地点击这里:jQuery下的返回顶部demo 可以看到,如果页面有滚动高度,

使用jQuery实现返回顶部功能

很多网站上都有返回顶部的效果,本文阐述如何使用jquery实现返回顶部按钮. 首先需要在顶部添加如下html元素: <p id="back-to-top"><a href="#top"><span></span>返回顶部</a></p> 其中a标签指向锚点top,可以在顶部防止一个<a name="top"></a>的锚点,这样在浏览器不支持js时也可

js返回顶部效果

当用户浏览的网页过于长的时候,用户在浏览到网页底部想要在返回顶部需要滚动好几次滚轮才能返回顶部,不仅麻烦,而且用户体验也会很差.现在的大多是页面都会在页面顶部或者是页面的可见区域的某一位置固定一个按钮,点击它可以使页面返回顶部,用户再也不用滚动滚轮了.下面我总结了集中常用的返回顶部的效果: 方法一(最简单,代码量最少,但是效果有些生硬).代码如下: 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <

[转] JS 返回顶部

仿新浪微博返回顶部的js实现(jQuery/MooTools) by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.com/wordpress/?p=1576 一.引言 在web页面中,如果页面较高,为了方便用户快速地返回顶部,都会添加一个返回顶部按钮.例如: 其中淘宝网的是要滚动条的滚动距离大于某一段距离才显示返回顶部按钮:人人网的返回顶部直接在底部的工具条上:新浪微博的返回顶部在滚动高度大于0的时候显示

20款网页常用的返回顶部代码

jQuery网页滚动显示浮动导航带返回顶部按钮 css3悬浮返回顶部按钮悬停显示二维码特效 jQuery网页返回顶部固定层微信二维码代码 jQuery绿色的qq在线客服点击返回顶部代码 div css网页右侧返回顶部样式代码 jQuery响应式网页返回顶部按钮代码 jQuery win8扁平风格返回顶部和在线客服网站侧边栏代码 jquery扁平风格带二维码的页面滑动返回顶部按钮代码 jQuery仿威锋商城网站右侧悬浮层返回顶部代码 jQuery带微信二维码网页侧边返回顶部效果 jquery wi

一个简单的返回顶部jQuery代码

本文演示jQuery返回顶部,当文章页比较长时间,可以方便用户返回网站的顶部,实现代码也不难,大家学习下! jQuery返回顶部 调用代码: <script language="javascript" type="text/javascript" src="jquery-1.4.2.min.js"></script> <script language="javascript" type="