如何停止锚链接跳到页面的另一个区域
问题描述 投票：0回答：1
我一直试图防止单击锚链接后滚动页面。
这是当前页面的外观。当用户单击左侧面板中的图像时，这应使较大版本的图像以全视图显示在右侧面板中（下方带有文本）。该页面特别需要如下所示。思想锚可能是最好的方法，但可以接受其他建议。
很遗憾，我尝试了href =“！＃”无效。
[还尝试了许多javascript方法，例如e.preventdefault（），e.stopPropagation（），并返回false，返回false只是使链接完全停止工作。
这里是带有锚点链接的缩略图按钮，它位于带有滚动条的div中（溢出：滚动），带有一组相似的缩略图。
<div class="col-lg-6 col-md-4 col-6">
<a href="#alexandru-zdrobau-200768-unsplash" class="d-block mb-4 h-100">
<img class="img-fluid img-thumbnail" src="Fashwell/ImagesFashwell/alexandru-zdrobau-200768-unsplash.jpg" alt="">
</a>
</div>
<div class="col-lg-6 col-md-4 col-6">
<a href="#anthony-ginsbrook-294309-unsplash" class="d-block mb-4 h-100">
<img class="img-fluid img-thumbnail" src="Fashwell/ImagesFashwell/anthony-ginsbrook-294309-unsplash.jpg" alt="">
</a>
</div>
<div class="col-lg-6 col-md-4 col-6">
<a href="#brooke-cagle-195860-unsplash" class="d-block mb-4 h-100">
<img class="img-fluid img-thumbnail" src="Fashwell/ImagesFashwell/brooke-cagle-195860-unsplash.jpg" alt="">
</a>
</div>
这是包含锚点的图像，在其他图像中也带有滚动条的div中。
<div class="output" id="alexandru-zdrobau-200768-unsplash">
<h1>
Alexandru Zdrobau
</h1>
<img class="img_output" src="Fashwell/ImagesFashwell/alexandru-zdrobau-200768-unsplashBOX.jpg">
</div>
<div class="products">
<ul>
<li style="color:red">
<span style="color:red">
Category: Jackets & Coats.
<a href="https://www.zalando.co.uk/modstroem-pamela-coat-classic-coat-mo421u00h-m11.html" style="color:red" target="_blank">
Best match: Modstroem Pamela Coat Classic Coat
</a>
</span>
</li>
<li style="color:blue">
<span style="color:blue">
Category: Bags.
<a href="https://www.zalando.co.uk/zac-zac-posen-eartha-iconic-soft-top-handle-solid-handbag-zz151h056-g11.html" style="color:blue" target="_blank">
Best match: Zac Zac Posen Eartha Iconic Soft Top Handle Solid Handbag
</a>
</span>
</li>
</ul>
</div>
<div class="output" id="anthony-ginsbrook-294309-unsplash">
<h1>
Anthony Ginsbrook
</h1>
<img class="img_output" src="Fashwell/ImagesFashwell/anthony-ginsbrook-294309-unsplashBOX.jpg">
</div>
<div class="products">
<ul>
<li style="color:red">
<span style="color:red">
Category: Eyewear.
<a href="https://www.zalando.co.uk/ray-ban-sunglasses-trasparent--brown-gradient-mirror-silver-ra254e00r-a11.html" style="color:red" target="_blank">
Best match: Ray Ban Sunglasses Trasparent Brown Gradient Mirror Silver
</a>
</span>
</li>
<li style="color:blue">
<span style="color:blue">
Category: Tops & Tees.
<a href="https://www.zalando.co.uk/g-star-vim-loose-print-t-shirt-khakiarmy-green-gs121d0i5-t11.html" style="color:blue" target="_blank">
Best match: G Star Vim Loose Print T Shirt Khakiarmy Green
</a>
</span>
</li>
<li style="color:green">
<span style="color:green">
Category: Jackets & Coats.
<a href="https://www.zalando.co.uk/levisr-original-trucker-denim-jacket-soft-as-butter-dark-le221g031-k11.html" style="color:green" target="_blank">
Best match: Levisr Original Trucker Denim Jacket Soft As Butter Dark
</a>
</span>
</li>
<li style="color:orange">
<span style="color:orange">
Category: Jeans & Trousers.
<a href="https://www.zalando.co.uk/dorothy-perkins-rip-darcy-jeans-skinny-fit-black-dp521n076-q11.html" style="color:orange" target="_blank">
Best match: Dorothy Perkins Rip Darcy Jeans Skinny Fit Black
</a>
</span>
</li>
<li style="color:black">
<span style="color:black">
Category: Shoes.
<a href="https://www.zalando.co.uk/converse-run-star-ox-trainers-blackalmost-black-co411a0uz-q11.html" style="color:black" target="_blank">
Best match: Converse Run Star Ox Trainers Blackalmost Black
</a>
</span>
</li>
</ul>
</div>
<div class="output" id="brooke-cagle-195860-unsplash">
<h1>
Brooke Cagle
</h1>
<img class="img_output" src="Fashwell/ImagesFashwell/brooke-cagle-195860-unsplashBOX.jpg">
</div>
<div class="products">
<ul>
<li style="color:red">
<span style="color:red">
Category: Eyewear.
<a href="https://www.zalando.co.uk/ray-ban-clubmaster-sunglasses-brown-ra254f002-703.html" style="color:red" target="_blank">
Best match: Ray Ban Clubmaster Sunglasses Brown
</a>
</span>
</li>
<li style="color:blue">
<span style="color:blue">
Category: Jeans & Trousers.
<a href="https://www.zalando.co.uk/american-eagle-next-jeans-skinny-fit-am421n000-q11.html" style="color:blue" target="_blank">
Best match: American Eagle Next Jeans Skinny Fit
</a>
</span>
</li>
<li style="color:green">
<span style="color:green">
Category: Jumpers & Cardigans.
<a href="https://www.zalando.co.uk/aaiko-trilly-jumper-aa321i02m-c11.html" style="color:green" target="_blank">
Best match: Aaiko Trilly Jumper
</a>
</span>
</li>
</ul>
</div>
这是我尝试通过以下方式停止滚动的JavaScript：
$("a[href^='#']").click(function(e){
e.stop();
});
$('.d-block mb-4 h-100').click(function(event) {
event.preventDefault();
return false;
});
$(".d-block mb-4 h-100").click(function (event) {
event.stopPropagation()
})
有什么想法吗？谢谢！
1个回答
0
投票
投票
第一个解决方案：在图库位置（或用户单击时希望浏览器跳转的位置）周围定义一些html锚，例如：
<a id="alexandru-zdrobau-200768-unsplash"></a>
定义所有您需要的。如果您像这样定义锚点，浏览器将跳过锚点的位置，并且不会干扰Gallery js的代码，因此您可以进一步定义浏览器的跳转。
另一个更精致的选择是找到正在使用的画廊的位置来检测URL哈希（URL中的锚点，并将链接替换为href =“ javascript：thatfunction（'anchor'）”。] >
PS：在没有看到实际代码的情况下，在第二个选项中我无法更明确地表示。
查看正在使用的库代码，应该在[]所在的位置>
最新问题
- 如何在XAML中无限播放GIF？
- ARM 模板中 FunctionApp 的诊断设置
- pycharm - f 字符串返回一个图标
- 故障排除
- 将 C# LINQ 查询转换为 VB
- 如何使用 PHP MYSQL 单独插入日期范围
- 尝试根据 Typescript 元素中现有的内容添加类型保护
- Kotlin/Native 的“#ifdef”编译条件
- 如何使用 Terraform 脚本禁用 s3 存储桶 ACL？
- 如何知道 useEffect 的触发条件并用它来创建条件？
- 为什么 Cargo nextest 在找到我的一些测试后选择不运行它们？
- 如何增加Linux中Rstudio的内存大小限制？
- 在 Swift iOS 中持久存储包含元组的数组
- java selenium webDriver：方法 driver.get(url) 不起作用，浏览器在没有 url 的情况下打开
- 尝试在简单的 shift() 操作中传递列表达式时，出现极坐标数据帧的计算错误
- 如何在Nestjs中禁用Public Graphql Introspection
- Excell 单元格注释和注释会阻止应用于单元格的形状正确安装
- 如何使用私有链接访问数据以及前端开发人员如何渲染数据
- ER DIAGRAM 中预定班次与实际班次的对应问题
- 我需要有条件地禁用未选中的复选框。反应js
© www.soinside.com 2019 - 2024. All rights reserved.