Javascript弹出滚动跳转

Javascript pop up scroll jump

本文关键字：滚动 Javascript      更新时间：2023-09-26

当然有一种简单的方法可以做到这一点。我需要在一个java脚本弹出窗口加载页面。但是我需要在窗口中显示的内容位于页面下方。有没有办法跳转到页面的那个部分?(所以跳转到垂直滚动坐标?)(另外，我不能编辑正在显示的页面。只是链接到它)

任何帮助都非常感谢!

最简单的方法是通过在url中的散列后面附加其id来链接到页面上的元素。例如，当打开弹出窗口时，

window.open('pagename.html#element-to-show','mywindow','width=400,height=200')

，其中"element-to-show"是页面下方元素的id。

使用HTML锚并在弹出窗口中加载page.html#myanchor(而不仅仅是page.html)

http://www.w3.org/TR/html4/struct/links.html

假设你不能链接到锚，但你加载到弹出窗口的页面在同一个域名中你可以使用这样的内容:

  1. 加载弹出窗口
  2. 设置onload事件，使弹出窗口在加载后滚动
  3. 加载后弹出的页面将向下滚动

你可能想要自定义这个，例如，你可以为openInPopUp()提供一个额外的参数，其中包含滚动到的确切位置。

the Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
    <head>
        <script language="javascript" type="text/javascript">
          function openInPopUp(link) {
            // (1) load the popup
            newwindow = window.open(link.href, 'name', 'height=300,width=200,resizable=1,scrollbars=1');
            // (2) set the onload event
            newwindow.onload = function() {
                scrollDown();
            };
            return false;
          }
          function scrollDown(){
            // (3) scroll down
            newwindow.scrollTo(0, 200);
          }
        </script>
        <title></title>
    </head>
    <body>
        <p>
            <a href="popup.html" onclick="return openInPopUp(this)">open link to popup and scroll down</a>
            <br/><br/>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum<br/>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum<br/>
        </p>
    </body>
</html>

如果您想从另一个域加载内容，而不是调用页面，这将不起作用，而是以权限错误结束。

scrollTo函数的详细信息

相关文章：