<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" > </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"> </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来实现:
下面是一个大致的实现代码:
// 获取链接元素
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来实现这个功能。具体步骤如下:
<a id="favLink" href="#" onClick="javascript:addToFav(100)">收藏</a>
<a id="cartLink" href="#" onClick="javascript:addToCart(200)">购买</a>
getElementById()
方法来获取链接元素。修改代码如下:var favLink = document.getElementById("favLink");
var cartLink = document.getElementById("cartLink");
scrollIntoView()
方法来实现自动定位到链接所在位置。修改代码如下:favLink.addEventListener("click", function() {
window.scrollTo(0, favLink.offsetTop); // 将窗口滚动到favLink元素所在的位置
// 弹出小窗口的代码
});
cartLink.addEventListener("click", function() {
window.scrollTo(0, cartLink.offsetTop); // 将窗口滚动到cartLink元素所在的位置
// 弹出小窗口的代码
});
完整的代码如下:
<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>
这样,当你点击链接时,弹出小窗口时,窗口会自动滚动到链接所在的位置。
【相关推荐】