zoukankan      html  css  js  c++  java
  • 控制页面的滚动条

    1. 控制页面滚动条,跳到页面底部

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery/jquery.min.js"></script>
    <script>
    $(function(){
    $('#toBottom').on("click", function(){
    var bottom = $("#bottom", window.document).offset().top
    console.log("bottom: " + bottom);
    $('html, body', window.document).stop().animate(
    {
    scrollTop: bottom
    }, 1000, function() {
    console.log("animate complete.")
    }
    );
    });
    $('#toBottom').trigger("click");
    });
    </script>
    </head>
    <body>

    <button id="toBottom" href="#bottom">click me jump to bottom</button>

    <p>out</p>
    <p>out</p>
    <p>out</p>
    <p>out</p>
    <p>out</p>
    <p>out</p>
    <p>out</p>
    <p>out</p>
    <p>out</p>
    <p>out</p>
    <p>out</p>
    <p>out</p>
    <p>out</p>
    <p>out</p>
    <p>out</p>
    <p>out</p>

    <div id="bottom"></div>
    </body>
    </html>


    2. 在iframe内部控制父页面滚动条滚到底部。
    2.1 parent.html

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>Title</title>
    </head>
    <body>
    <iframe name="iframe1" id="iframe1" width="100%" height="600" style="border: 0;"
    src="inner.html" >
    </iframe>
    <p>out</p>
    <p>out</p>
    <p>out</p>
    <p>out</p>
    <p>out</p>
    <p>out</p>
    <p>out</p>
    <p>out</p>
    <p>out</p>
    <p>out</p>
    <p>out</p>
    <p>out</p>
    <p>out</p>
    <p>out</p>
    <p>out</p>
    <p>out</p>
    <div id="bottom"></div>
    </body>
    </html>


    2.2 inner.html

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery/jquery.min.js"></script>
    <script>
    $(function(){
    $(document).on("BarToToped", function(){
    var bottom = $("#bottom", window.parent.document).offset().top
    console.log("bottom: " + bottom);
    $('html, body', window.parent.document).stop().animate(
    {
    scrollTop: bottom
    }, 1000, function() {
    console.log("animal complete.")
    }
    );
    });
    $(document).trigger("BarToToped");
            });
    </script>
    </head>
    <body>
    <p> inner</p>
    <p> inner</p>
    <p> inner</p>
    <p> inner</p>
    <p> inner</p>
    <p> inner</p>
    <p> inner</p>
    <p> inner</p>
    <p> inner</p>
    <p> inner</p>
    <p> inner</p>
    <p> inner</p>
    <p> inner</p>
    <p> inner</p>
    <p> inner</p>
    <p> inner</p>
    <p> inner</p>
    <p> inner</p>
    <p> inner</p>
    <p> inner</p>
    <p> inner</p>
    <p> inner</p>
    <p> inner</p>
    <p> inner</p>
    <p> inner</p>
    <p> inner</p>
    <p> inner</p>
    <p> inner</p>
    <p> inner</p>
    <p> inner</p>
    <p> inner</p>
    <p> inner</p>
    <p> inner</p>
    <p> inner</p>
    <p> inner</p>
    <p> inner</p>
    <p> inner</p>
    <p> inner</p>
    </body>
    </html>


    3. 总结:

    3.1 滚动效果
    animate
    scrollTop

    3.2 事件绑定,触发事件
    $(document).on("BarToToped", function(){ ...})
    $(document).trigger("BarToToped");

    3.3 在iframe内部调用外部元素
    $("#bottom", window.parent.document)







  • 相关阅读:
    uiautomator2自动化测试
    APP性能测试(电池电量、流量、CPU、内存)
    python虚拟环境搭建
    unittest报错(return self._request(command_info[0], url, body=data))
    python pip错误处理
    adb 实用命令
    大数据学习(一)
    windows 下Virtualenv搭建mysql环境
    python奇怪毛病集合
    python作业
  • 原文地址:https://www.cnblogs.com/pascal1000/p/12923249.html
Copyright © 2011-2022 走看看