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)







  • 相关阅读:
    VS2015 C#取消最大化按钮,设置鼠标不可调整窗体大小
    C++调用C#编写的DLL【转】
    C#封装成DLL,并在C#中调用
    ubuntu永久修改主机名
    Anaconda3的安装和汉化
    windows下面安装Python和pip教程
    pip install bs4安装失败
    Sublime text 3中文汉化教程
    Vmware安装ubuntu详细教程
    Sublime text3修改tab键为缩进为四个空格
  • 原文地址:https://www.cnblogs.com/pascal1000/p/12923249.html
Copyright © 2011-2022 走看看