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>
  • 相关阅读:
    jquery
    实现元素垂直居中
    浏览器 标准模式和怪异模式
    cookie session ajax
    React props.children
    使用React.lazy报错Import in body of module; reorder to top import/first
    state 和 props 之间的区别
    Harbor打怪升级
    Centos7下安装yum工具
    正则表达式匹配两个特殊字符中间的内容(特殊字符不显示)
  • 原文地址:https://www.cnblogs.com/shandayuan/p/9203496.html
Copyright © 2011-2022 走看看