jQuery如何快速滚动到页面顶部?

在滚动页面中如何使用jQuery快速滚动到页面顶部?下面本篇文章就来给大家介绍一下使用jQuery快速滚动到页面顶部的方法,希望对大家有所帮助。

原文地址:jQuery如何快速滚动到页面顶部?

在jQuery中可以使用scrollTo()方法快速滚动到页面顶部。jQuery的scrollTo()方法用于设置或返回所选元素的垂直滚动条位置。通过在window属性上应用此方法,可以使用此行为滚动到页面顶部;只要将position参数设置为0会将页面滚动到顶部。

语法:

$(window).scrollTop(position);

示例:

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<style>

    .scroll {

        height: 1000px;

        background-color: palegoldenrod;

    }

</style>

</head>

<h2>使用jQuery快速滚动到页面顶部</h2>

    <p>单击下面的按钮,滚动到页面顶部</p>


    <p class="scroll">这里一段测试文本!这里一段测试文本!这里一段测试文本!</p>


    <button onclick="scrollToTop()">单击,滚动到顶部</button>

    <script src= "https://code.jquery.com/jquery-3.3.1.min.js"> </script>

    <script>

        function scrollToTop() {

            $(window).scrollTop(0);

        }

    </script>

</body>


</html>

在页面底部,单击按钮之前:

点击按钮后:

相关推荐:

HTML视频教程

JS视频教程

jQuery视频教程

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • (一) window对象 (1) 概述 在浏览器中,window对象(注意,w为小写)指当前的浏览器窗口。它也是所...
    woow_wu7阅读 8,110评论 7 6
  •   JavaScript 与 HTML 之间的交互是通过事件实现的。   事件,就是文档或浏览器窗口中发生的一些特...
    霜天晓阅读 3,652评论 1 11
  • 一:认识jquery jquery是javascript的类库,具有轻量级,完善的文档,丰富的插件支持,完善的Aj...
    xuguibin阅读 1,758评论 1 7
  • 1.第一种方式:锚链接 优点:简单快速,没有兼容性问题 缺点: 视觉上不够直观,用户体验不太好 2.js的方式: ...
    love2013阅读 852评论 0 0
  • 有人说,人的心就像一个空杯子,如果里面是空的,那么就是个洞,只会不断索取他人的情感,而如果这只杯子被注满了,它才会...
    狩望轮回阅读 164评论 0 0

友情链接更多精彩内容