jquery点击回到页面顶部方法分享,如何实现?

KLQ 2020-08-13 15:41:35 java常见问答 5850

你知道jquery点击回到页面顶部应该如何实现吗?具体的实现方式是怎样的呢?下面一起通过文章来进行简单的了解吧。

实现方式:

<!DOCTYPE html>
<html>
    
    <head>
        <meta charset="UTF-8">
        <title>05-jQuery- 回到顶部案例</title>
        <style>
            .bk-top-box {
                position: fixed;
                bottom: 40px;
                right: 10px;
                cursor: pointer;
            }
        </style>
        <script src="jquery-1.11.3.js"></script>
        <script>
            $(function () {
                $("#J-bk-top")
                    .on('click', function () {
                        $(window)
                            .scrollTop(0);
                        $(window)
                            .scrollLeft(0);
                    });
                
                $("#J_Box")
                    .on('click', 'h1', function () {
                        //this  jQuery的事件响应方法中,this指向被点击的 dom对象
                        this.innerHTML += '-';
                        
                        //dom对象转换成 jQuery对象
                        $(this)
                            .text($(this)
                                .text() + 1);
                    });
            });
            
        </script>
    </head>
    
    <body>
        <div id="J-bk-top">
            <img src="imgs/bk-top3.jpg" height="44" width="44" alt="">
        </div>
        
        <!-- ctrl + shift + g  自动包裹标签 -->
        <div id="J_Box">
            <h1>传智播客1</h1>
            <h1>传智播客2</h1>
            <h1>传智播客3</h1>
            <h1>传智播客</h1>
            <h1>传智播客</h1>
            <h1>传智播客</h1>
            <h1>传智播客</h1>
            <h1>传智播客</h1>
            <h1>传智播客</h1>
            <h1>传智播客</h1>
            <h1>传智播客</h1>
            <h1>传智播客</h1>
            <h1>传智播客</h1>
            <h1>传智播客</h1>
            <h1>传智播客</h1>
            <h1>传智播客</h1>
            <h1>传智播客</h1>
            <h1>传智播客</h1>
            <h1>传智播客</h1>
            <h1>传智播客</h1>
            <h1>传智播客</h1>
            <h1>传智播客</h1>
            <h1>传智播客</h1>
            <h1>传智播客</h1>
            <h1>传智播客</h1>
            <h1>传智播客</h1>
            <h1>传智播客</h1>
            <h1>传智播客</h1>
            <h1>传智播客</h1>
            <h1>传智播客</h1>
        </div>
    </body>
    
</html>

效果:

结果

以上就是jquery方面的一些简单介绍了,更多jquery相关知识,请继续通过奇Q工具网的常见问题栏目来进行了解吧,希望上面的文章可以对你有所帮助哦。

推荐阅读:

jquery动态创建表格方法分享

jquery如何给b标签赋值?方法介绍

jquery ajax返回值怎样进行赋值?