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

    采用锚点进行页面中的跳转的确很方便,但是要想增加网页的效果,可以使用jquery中的animate,实现滚动的一个动作,慢慢的滚动到你想跳转到的位置,从而看起来会非常高大上。

    滚动到顶部:

    $('.scroll_top').click(function(){$('html,body').animate({scrollTop: '0px'}, 800);});

    滚动到指定位置:

    $('.scroll_a').click(function(){$('html,body').animate({scrollTop:$('.a').offset().top}, 800);});

    <!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="../js/jquery.min.js"></script>

    <style>

     .box{ height:200px; 100%; background:#ccc; margin:10px 0;}

     .location{ position:fixed; right:0; bottom:10px; 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"></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>

  • 相关阅读:
    SharePoint 2013 通过HttpModule 管理视图权限
    SharePoint 2013 内容部署报错
    SharePoint 2013 日历视图兼容性问题
    SharePoint 2013 JavaScript 对象判断用户权限
    SharePoint 2013 PowerShell命令备份还原报错
    SharePoint 2013 修改表单认证登录页面
    SharePoint 2013 表单认证使用ASP.Net配置工具添加用户
    linux下永久添加静态路由
    CAN协议,系统结构和帧结构
    STM32串口的设置和库函数的介绍
  • 原文地址:https://www.cnblogs.com/snowhite/p/4970942.html
Copyright © 2011-2022 走看看