jQuery返回顶部效果

最新推荐文章于 2021-04-12 11:41:45 发布

kenhins

最新推荐文章于 2021-04-12 11:41:45 发布

阅读量1k

点赞数

分类专栏： jQuery Javascript 文章标签： jquery js javascript

本文链接：https://blog.csdn.net/kenhins/article/details/27204545

版权

Javascript 同时被 2 个专栏收录

62 篇文章 1 订阅

订阅专栏

jQuery

40 篇文章 0 订阅

订阅专栏

1、首先是CSS样式：

 /*updown*/
#shangxia{position:fixed;top:83%;right:42%;margin-right:-543px;display:block;_display:none}
#shang,#comt,#xia{background:url(../images/sprite.png) no-repeat;position:relative;cursor:pointer;height:25px;width:29px;margin:10px 0 0}
#shang{background-position:0 -308px}#comt{background-position:0 -338px;height:32px}
#xia{background-position:0 -376px}
#comt:hover{background-position:-31px -338px}#shang:hover{background-position:-31px -308px}
#xia:hover{background-position:-31px -376px}

2、接着是jquery代码：（要引入jQuery核心库）

/*updown*/
jQuery(document).ready(function($) {$body = (window.opera) ? (document.compatMode == "CSS1Compat" ? $("html") : $("body")) : $("html,body");$("#shang").mouseover(function() {up()}).mouseout(function() {clearTimeout(fq)}).click(function() {$body.animate({scrollTop: 0},400)});$("#xia").mouseover(function() {dn()}).mouseout(function() {clearTimeout(fq)}).click(function() {$body.animate({scrollTop: $(document).height()},400)});$("#comt").click(function() {$body.animate({scrollTop: $("#comments").offset().top},400)});});function up() {$wd = jQuery(window);$wd.scrollTop($wd.scrollTop() - 1);fq = setTimeout("up()", 50)};function dn() {$wd = jQuery(window);$wd.scrollTop($wd.scrollTop() + 1);fq = setTimeout("dn()", 50)};

3、引用页面：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    
    <title>My JSP 'index.jsp' starting page</title>
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
	<!--
	<link rel="stylesheet" type="text/css" href="styles.css">
	-->
	<style type="text/css">
	   /*updown*/
		#shangxia{position:fixed;top:60%;right:50%;margin-right:-543px;display:block;_display:none}
		#shang,#comt,#xia{background:url(images/sprite.png) no-repeat;position:relative;cursor:pointer;height:25px;width:29px;margin:10px 0 0}
		#shang{background-position:0 -308px}#comt{background-position:0 -338px;height:32px}#xia{background-position:0 -376px}
		#comt:hover{background-position:-31px -338px}#shang:hover{background-position:-31px -308px}#xia:hover{background-position:-31px -376px}
		/*存档*/
	</style>
	///上面的是内部样式，上面已经有外部样式，如果不使用内部样式可以引入外部样式
	<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
    <script type="text/javascript" src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
    <script type="text/javascript" src="js/updown/devework.js"></script>
  </head>
   
  
  <body>
  
   <p>1</p>
    <p>1</p>
     <p>1</p>
      <p>1</p>
       <p>1</p>
       <p>1</p>
    <p>1</p>
     <p>1</p>
      <p>1</p>
       <p>1</p>
       <p>1</p>
    <p>1</p>
     <p>1</p>
      <p>1</p>
       <p>1</p>
       <p>1</p>
    <p>1</p>
     <p>1</p>
      <p>1</p>
       <p>1</p>
       <p>1</p>
    <p>1</p>
     <p>1</p>
      <p>1</p>
       <p>1</p>
       <p>1</p>
    <p>1</p>
     <p>1</p>
      <p>1</p>
       <p>1</p>
       <p>1</p>
    <p>1</p>
     <p>1</p>
      <p>1</p>
       <p>1</p>
       <p>333</p>
        <p>333</p>
         <p>333</p>
          <p>333</p>
           <p>333</p>
            <p>333</p>
             <p>333</p>
              <p>333</p>
        <p>333</p>
         <p>333</p>
          <p>333</p>
           <p>333</p>
            <p>333</p>
             <p>333</p>
              <p>333</p>
        <p>333</p>
         <p>333</p>
          <p>333</p>
           <p>333</p>
            <p>333</p>
             <p>333</p>
              <p>333</p>
        <p>333</p>
         <p>333</p>
          <p>333</p>
           <p>333</p>
            <p>333</p>
             <p>333</p>
              <p>333</p>
        <p>333</p>
         <p>333</p>
          <p>333</p>
           <p>333</p>
            <p>333</p>
             <p>333</p>
              <p>333</p>
        <p>333</p>
         <p>333</p>
          <p>333</p>
           <p>333</p>
            <p>333</p>
             <p>333</p>
              <p>333</p>
        <p>333</p>
         <p>333</p>
          <p>333</p>
           <p>333</p>
            <p>333</p>
             <p>333</p>
              <p>333</p>
        <p>333</p>
         <p>333</p>
          <p>333</p>
           <p>333</p>
            <p>333</p>
             <p>333</p>
              <p>333</p>
        <p>333</p>
         <p>333</p>
          <p>333</p>
           <p>333</p>
            <p>333</p>
             <p>333</p>
             
       	<div id="shangxia">
            <div id="shang" title="↑ 返回顶部"></div>
            <div id="comt" title="沙发还没有被抢哦"></div>
            <div id="xia" title="↓ 移至底部"></div>
        </div>
  </body>
</html>