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

怼烎@ 2022-04-03 09:20 350阅读 0赞

<!DOCTYPE>
    <html>
    <head>
    <meta charset=utf-8" />
    <title>js平滑滚动到顶部、底部、指定地方</title>
    <script type="text/javascript" src="http://www.daixiaorui.com/Public/js/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">新闻详情<br/>新闻详情</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>

发表评论取消回复

表情：

评论列表（有 0 条评论，350人围观）

还没有评论，来说两句吧...

相关阅读

相关 java swing设置JScrollPane滚动条到指定位置或者底部

一，java swing设置JScrollPane滚动条到指定位置加粗样式 > 这个问题困扰了我好久，才解决。直接上代码 JPanel myCanvas=n

客官°小女子只卖身不卖艺/ 2023年10月14日 11:46/ 0 赞/ 46 阅读

相关 JavaScript中的scrollTop（js中的scrollTop，滚动到顶部，javascript滚动到顶部）

简述：scrollTop是JavaScript中一个非常有用且重要的方法，它用于获取或设置元素的垂直滚动条位置，实现各种滚动相关的功能，无论是回到顶部、滚动到指定位置还是监听

比眉伴天荒/ 2023年10月08日 22:47/ 0 赞/ 48 阅读

相关 js 滚动条自动滚动到最底部

简介：功能简介，js 滚动条自动滚动到最底部效果展示： ![bb23a00672684fb2b7cf683b81c3e66e.png][] 核心代码： w

朱雀/ 2023年09月26日 22:23/ 0 赞/ 206 阅读

相关 js获取滚动条距离浏览器顶部,底部的高度

做web开发经常会碰到需要获取[浏览器][Link 1]的滚动条与顶部和底部的距离，然后做相应的处理动作。下面作者就如何通过js来获取浏览器滚动条距离浏览器顶部和底部的高度做一

素颜马尾好姑娘i/ 2022年07月16日 02:12/ 0 赞/ 350 阅读

相关 RecyclerView平滑到指定位置

根据position滑动 recyclerView.smoothScrollToPosition(0); 根据位置滑动 smoothScro

Love The Way You Lie/ 2022年04月15日 01:41/ 0 赞/ 246 阅读

相关 ionic 页面滚动到底部方法

强列推荐先看这篇译文《[angular4 滚动事件][angular4]》 You’re trying to call a component method befo

骑猪看日落/ 2022年04月08日 18:13/ 0 赞/ 426 阅读

相关 JavaScript-平滑滚动到顶部、底部、指定地方

<!DOCTYPE> <html> <head> <meta charset=utf-8" /> <title>js平滑滚动到顶部、底部

怼烎@/ 2022年04月03日 09:20/ 0 赞/ 351 阅读

相关 vue 滚动条到顶部或者到指定位置

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0hlcm9f

川长思鸟来/ 2022年04月02日 12:58/ 0 赞/ 852 阅读

相关 javascript 元素滚动到顶部固定效果(搜索框在顶部悬停)

除了搜索框，或者导航栏等类型特效都可以采用相同的方式解决。无疑像效果图所演示的效果相对于固定导航栏来说要更难一些。有其它效果需要更改，请自行修改下方源码。在线演示地址：[

雨点打透心脏的1/2处/ 2021年12月24日 10:27/ 0 赞/ 497 阅读

相关 IDEA断点调试到指定地方

一程序当前调试状态 ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4u

迷南。/ 2021年07月24日 21:14/ 0 赞/ 532 阅读