弹出小窗口时,自动定位到链接位置


        <br><br><br><br><br><br><br><br><br><br><br>
                <a href="#" onClick="javascript:addToFav(100)">收藏</a><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR>
                <a href="#" onClick="javascript:addToFav(101)">收藏</a><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR>                
                <a href="#" onClick="javascript:addToFav(102)">收藏</a><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR>                
                <a href="#" onClick="javascript:addToFav(103)">收藏</a><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR>                
                <a href="#" onClick="javascript:addToFav(104)">收藏</a><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR>
               这个收藏链接有很多。而且是不固定的
              <a href="#" onClick="javascript:addToFav(200)">收藏</a><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR>
        
                    
            <script>
            function getposition(y, obj)
            {
            obj.style.left = event.clientX - 50 + window.document.body.scrollLeft;;
           obj.style.top = event.clientY - 200 + window.document.body.scrollTop;;
            }

            function addToFav( styleid )
            {
                document.all.addtofav.src='StyleAddToFavorite.asp?ItemIDs=' +  styleid;
                getposition(event.clientY, document.all.addtofav);
            }
            </script>
            
            <iframe  src="about-blank" name="addtofav" id="addtofav" scrolling=no frameborder=0 style="top:0px;left:0px" width=0 height=0></iframe>





下面是StyleAddToFavorite.asp页
<html>
<head>
<title>加入收藏夹跳出小窗口</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">


    <style type="text/css">
        <!--
body {
    margin-left: 0px;
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
    a.w1:link {
    color: #666600;
    text-decoration: none;
    font-weight: bold;
}
a:visited {
    color: #666600;text-decoration: none;
        font-weight: bold;
    
}
a:hover {
    color: #666600;
    text-decoration: none;
    background-color: #D6DBFC;
        font-weight: bold;
}
a:active {
    color: #666600;text-decoration: none;
        font-weight: bold;
}

}

--></style>
</head>
<script language="javascript">


function closeme()
{
               parent.document.all.addtofav.style.position = '';
               parent.document.all.addtofav.width = "0";
               parent.document.all.addtofav.height = "0";

}
setTimeout("closeme()", 10000);
</script>


<body>

<table width="222" height="162" border="1" cellpadding="1" cellspacing="1">
  <tr>
    <td align="left" valign="top"><table width="220" height="160" border="0" cellpadding="0" cellspacing="0">
      
      <tr>
        <td height="54" align="left" valign="top"><table width="220" border="0" cellpadding="0" cellspacing="0">
          
          <tr>
            <td height="42" class="ta11"><table width="220" height="42" border="0" cellpadding="0" cellspacing="0">
              <tr>
                <td width="58"><img src="image/img1.jpg" width="58" height="100"></td>
                <td align="left" valign="top"><table width="166" height="42" border="0" cellpadding="0" cellspacing="0">
                  <tr>
                    <td height="24" colspan="2" align="left" valign="bottom" bgcolor="#FFFFFF" class="ta11">

                    <table width="166" height="24" border="0" cellpadding="0" cellspacing="0">
                      <tr>
                        <td height="40" align="left" valign="bottom" style="font-size:9pt;"><%=msg%></td>
                      </tr>
                    </table>                                    
                    </td>
                  </tr>
                  <tr>
                    <td width="118" height="14" align="left" valign="middle" bgcolor="#FFFFFF" >&nbsp;</td>
                    
                  </tr>
                </table></td>
              </tr>
            </table></td>
          </tr>
          <tr>
            <td height="55"><a href="MemberFavourite.asp" target="M18Cart"  style="font-size:9pt;"><b>查看收藏夹</b></td>
          </tr>
        </table></td>
      </tr>
      <tr>
        <td height="17"><table width="220" height="17" border="0" cellpadding="0" cellspacing="0">
          <tr>
            <td width="139" height="17">&nbsp;</td>
            <td width="58" height="17" align="left" valign="bottom" ><a href="javascript:closeme()" style="font-size:9pt;"><font color="#FF6E1D" >关闭窗口</font></a></td>
          </tr>
        </table></td>
      </tr>
    </table></td>
  </tr>
</table>

</body> 
 


当点击“收藏”时,在当前位置弹出一个小窗口,但当页面比较长,需要滚动,再点击“收藏”时,页面自动在最上面去了,需要又把页面滚下来。很不方便

有没有办法不管在页面的上方,还是下方,点击“收藏”时,页面自动滚动相应位置。像链接一个锚点一样。想尝试加一个锚点,自己弄了不成。请教!

要实现点击“收藏”时页面自动滚动到相应位置,你可以使用锚点链接的方式。在每个收藏链接上添加一个锚点,然后在弹出窗口的页面中使用JavaScript代码来滚动到相应的锚点位置。

首先,在每个收藏链接上添加一个锚点,例如:

<a href="#fav100" onClick="javascript:addToFav(100)">收藏</a>

然后,在弹出窗口的页面中使用JavaScript代码来滚动到相应的锚点位置。你可以在弹出窗口的页面的<script>标签中添加以下代码:

window.onload = function() {
  var hash = window.location.hash;
  if (hash) {
    var target = document.querySelector(hash);
    if (target) {
      target.scrollIntoView();
    }
  }
};

这段代码会在弹出窗口的页面加载完成后执行。它会检查URL中的锚点部分(例如#fav100),然后找到对应的元素并将其滚动到可视区域。

请注意,为了使锚点起作用,你需要确保每个收藏链接的锚点与弹出窗口页面中的元素ID匹配。例如,如果你的收藏链接是<a href="#fav100">收藏</a>,那么在弹出窗口页面中的元素应该有一个ID为fav100

希望这可以帮助到你!如果你有任何其他问题,请随时问我。

JavaScript弹出新窗口并控制窗口移动到指定位置的方法

<!DOCTYPE html>
<html>
<head>
<script>
function openWin()
{
myWindow=window.open('','','width=200,height=100');
myWindow.document.write("<p>This is 'myWindow'</p>");
}
function moveWin()
{
myWindow.moveTo(0,0);
myWindow.focus();
}
</script>
</head>
<body>
<input type="button" value="Open 'myWindow'" 
onclick="openWin()" />
<br><br>
<input type="button" value="Move 'myWindow'" 
onclick="moveWin()" />
</body>
</html>

顶一下

在一些网站或应用程序中,当用户点击某些链接时,通常会弹出一个小窗口,以便在不离开当前页面的情况下查看链接内容或进行其他操作。然而,如果该窗口一开始的位置与链接位置相距较远,用户可能需要寻找该窗口并将其移动到所需位置,这可能会影响用户体验和效率。因此,当弹出小窗口时,自动定位到链接位置内容是使用户体验更良好的一种方法。

自动定位到链接位置内容的方法有多种,下面将介绍其中的几种。

一种常见的方法是记录链接位置,并在弹出窗口时将窗口位置自动定位到该位置。这需要在链接被点击时,将链接位置记录在某个地方,例如浏览器的 session storage 中。然后,在弹出窗口被打开时,通过 JavaScript 代码来读取该位置,并将窗口位置设为该位置。此方法可以确保弹出窗口位置正确,但需要 JavaScript 的支持。

另一种方法是使用 HTML 中的锚点。在链接中添加一个锚点标记,例如“#content”,表示该链接指向页面中的某个特定内容,然后在弹出窗口中使用 JavaScript 来查找该锚点并将窗口位置定位到该位置。此方法不需要记录位置,但需要在页面上添加锚点标记。

还有一种方法是,在弹出窗口中使用 JavaScript 来查找链接所属的页面元素,并将窗口位置定位到该元素。例如,如果链接指向页面的某个特定段落,可以使用 jQuery 或其他 JavaScript 库来查找该段落,并将窗口位置定位到该段落。此方法不需要记录位置,不需要添加锚点标记,但需要在页面中使用 JavaScript 库。

无论使用哪种方法,自动定位到链接位置内容都可以提高用户体验和效率。然而,应注意避免窗口位置过于接近链接位置,以免盖住链接或影响用户的其他操作。此外,应根据具体情况选择最适合的实现方法,并测试确保其在各种浏览器和设备上的兼容性。

您的问题可能比较模糊,我理解为您希望在点击链接后弹出小窗口,并且希望小窗口自动定位到链接位置,同时提供一些相关信息。

如果是这样的话,您可以使用JavaScript来实现:

  1. 添加一个点击事件监听器到链接上,当链接被点击时,触发弹出小窗口功能。
  2. 在弹出小窗口内部,使用JavaScript获取链接位置并进行定位。
  3. 在小窗口内部,可以添加所需的相关信息。

下面是一个大致的实现代码:

// 获取链接元素
var link = document.getElementById('link');

// 添加点击事件监听器
link.addEventListener('click', function(event) {
    event.preventDefault(); // 阻止默认跳转行为

    // 获取链接位置
    var linkPosition = link.getBoundingClientRect();

    // 弹出小窗口
    var popup = window.open(link.href, 'popup', 'width=400,height=300');

    // 在小窗口内部添加信息和定位
    popup.onload = function() {
        var popupWindow = popup.window;

        // 添加信息
        popupWindow.document.body.innerHTML = '<p>这里是相关信息。</p>';

        // 定位到链接位置
        popupWindow.scrollTo(linkPosition.left, linkPosition.top);
    };
});

这个代码仅供参考,实际实现中可能需要根据具体需求进行修改和优化。

以下内容引用ChatGPT:
要实现点击"收藏"按钮时页面自动滚动到相应位置,你可以使用JavaScript中的scrollIntoView()方法。这个方法可以让页面滚动到指定元素的位置,类似于链接一个锚点。

下面是一个示例代码,展示了如何在点击"收藏"按钮时,页面自动滚动到指定位置:

<!DOCTYPE html>
<html>
<head>
  <title>自动滚动示例</title>
  <style>
    #target {
      background-color: yellow;
      padding: 20px;
      margin: 500px;
    }
  </style>
</head>
<body>
  <h1>自动滚动示例</h1>
  <button onclick="scrollToTarget()">收藏</button>
  <div id="target">
    我是一个目标元素
  </div>
  
  <script>
    function scrollToTarget() {
      var targetElement = document.getElementById('target');
      targetElement.scrollIntoView({ behavior: 'smooth' });
    }
  </script>
</body>
</html>

在上面的示例中,当点击"收藏"按钮时,页面会平滑地滚动到id为"target"的元素位置。你可以根据自己的实际需求修改代码,并将其嵌入到你的项目中。

页面滚动的平滑效果是由scrollIntoView()方法中的behavior: 'smooth'实现的。如果你想要更快速地滚动到目标位置,可以将behavior属性的值设为'auto'

可以参考:
JavaScript弹出新窗口并控制窗口移动到指定位置的方法:http://www.javascriptcn.com/post/2582
或者这个:
关于在弹出框中做点击按钮定位至某一位置的功能:https://www.cnblogs.com/harryzong/p/17200674.html

解决思路如下:首先,获取所有链接元素,并为每个链接添加点击事件监听器,然后根据鼠标点击位置和滚动距离将弹出窗口定位到链接位置,还有问题请提问

可以通过添加锚点的方式实现

给每个链接加个监听器

【以下回答由 GPT 生成】

首先,要让弹出小窗口时自动定位到链接位置,你需要使用JavaScript来实现这个功能。具体步骤如下:

  1. 首先,给链接元素添加一个id属性,以便于在JavaScript中能够准确地获取到该元素。修改代码如下:
<a id="favLink" href="#" onClick="javascript:addToFav(100)">收藏</a>
<a id="cartLink" href="#" onClick="javascript:addToCart(200)">购买</a>
  1. 在JavaScript中,可以使用getElementById()方法来获取链接元素。修改代码如下:
var favLink = document.getElementById("favLink");
var cartLink = document.getElementById("cartLink");
  1. 接下来,你需要使用scrollIntoView()方法来实现自动定位到链接所在位置。修改代码如下:
favLink.addEventListener("click", function() {
  window.scrollTo(0, favLink.offsetTop); // 将窗口滚动到favLink元素所在的位置
  // 弹出小窗口的代码
});

cartLink.addEventListener("click", function() {
  window.scrollTo(0, cartLink.offsetTop); // 将窗口滚动到cartLink元素所在的位置
  // 弹出小窗口的代码
});
  1. 最后,你需要把弹出小窗口的代码放入相应的事件处理函数中。

完整的代码如下:

<a id="favLink" href="#" onClick="javascript:addToFav(100)">收藏</a><br><br><br><br><br><br><br><br><br><br>
<a id="cartLink" href="#" onClick="javascript:addToCart(200)">购买</a>

<script>
  var favLink = document.getElementById("favLink");
  var cartLink = document.getElementById("cartLink");

  favLink.addEventListener("click", function() {
    window.scrollTo(0, favLink.offsetTop);
    // 弹出小窗口的代码
  });

  cartLink.addEventListener("click", function() {
    window.scrollTo(0, cartLink.offsetTop);
    // 弹出小窗口的代码
  });
</script>

这样,当你点击链接时,弹出小窗口时,窗口会自动滚动到链接所在的位置。



【相关推荐】



如果你已经解决了该问题, 非常希望你能够分享一下解决方案, 写成博客, 将相关链接放在评论区, 以帮助更多的人 ^-^