zoukankan      html  css  js  c++  java
  • js平滑滚动到顶部、底部、指定地方

    <!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://cdn.staticfile.org/jquery/2.1.1-rc2/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">产品介绍产品介绍产品介绍产品介绍产品介绍产品介绍产品介绍产品介绍产品介绍产品介绍产品介绍产品介绍产品介绍</div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box bottom">111111111111111</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>
  • 相关阅读:
    解决VS2005打开js,css等文件,中文都是乱码的问题
    PHP代码优化43条方法实战列表
    php长文章分页
    ASP通用分页类
    用Asp隐藏文件路径,实现防盗链
    用 PHP5 打造简易的 MVC 架构
    一男赶集卖猪,天黑遇雨发生的4个故事,有启发意义的哦!
    西湖雾湖夜湖雪湖
    php生成静态html分页实现方法
    将网络上的图片下载到本地ASP代码
  • 原文地址:https://www.cnblogs.com/shandayuan/p/9203496.html
Copyright © 2011-2022 走看看