[js常用]页面滚动的顶部,指定位置或底部,平滑滚…

2018-12-02 06:13:08来源:博客园 阅读 ()

新老客户大回馈,云服务器低至5折

js平滑滚动到顶部、底部、指定地方

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>js平滑滚动到顶部、底部、指定地方</title>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/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"></div>

    <div class="location">
         <p class="scroll_top">返回顶部</p>
         <p class="scroll_a">产品介绍</p>
         <p class="scroll_bottom">滑到底部</p>
    </div>
</body>
</html>
<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>

 

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:JS之ClassName属性使用

下一篇:HTML DOM 知识点整理(一)—— Document对象