3

当我将 HTML 链接添加到页面的特定部分时：

<a href="#specific">test</a>

我注意到它改变了地址栏的 URL。尽管我遇到过以这种方式链接但地址栏没有更新的网站。这怎么可能？

编辑：这可能是一个 AJAX 解决方案，如果他们在不更改 URL 的情况下使其工作，就好像我没记错一样，页面没有重新加载，它直接到达目的地......

4

5 回答 5

9

您可能希望查看 jquery 插件，scrollTo。

http://jquery.com

还有几个 scrollTo 的链接

http://demos.flesler.com/jquery/scrollTo/

http://flesler.blogspot.com/2007/10/jqueryscrollto.html

你可以这样做：

的HTML

<a href="#scrollToMe" class="scrollLink">click me to scroll</a>
<div class="gap">a big gap</div>
<h1 id="scrollToMe">I should scroll to here without a # in the URL</h1>

javascript（jquery 和 scrollto 插件）

$(document).ready(function() {
    $(".scrollLink").click(function(e) {

        $.scrollTo($(this).attr("href"));    
        e.preventDefault();

    });

});

javascript 所做的是，当单击具有类“.scrollLink”的链接时，将页面向下滚动到具有相同 ID 的元素，作为单击的特定链接的 href。然后 e.preventDefault() 停止它像普通哈希链接一样工作，并停止它出现在 URL 栏中。

这是一个适合您的示例：http: //jsfiddle.net/alexkey/c3jsY/7/

还有一个不在框架集中的版本，所以你可以看到 URL 没有改变：

http://fiddle.jshell.net/alexkey/c3jsY/7/show/light/

这种方法有几个优点

  1. 只需将 scrollLink 类应用于您想要阻止散列出现的链接（又好又简单）
  2. 它使用普通的href，这也意味着即使禁用了javascript，链接仍然可以工作——有利于可访问性，可能还有搜索引擎优化。
于 2011-11-25T21:34:05.457 回答
0

可以使用 javascript 拦截点击事件，执行你自己的自定义逻辑，然后取消导航事件，这样 URL 就不会改变

于 2011-11-25T17:09:00.193 回答
0

也许你可以尝试类似：window.scroll(0,150); 而不是“（0,150）”放你的目标的坐标。

于 2011-11-25T17:17:14.163 回答
0

您必须尝试使用​​数字（此处显示为 200）才能使窗口正确对齐。

<a href="javascript:void(0);" onclick="window.scroll(0,200);">test</a>
于 2011-11-25T17:21:41.977 回答
0

您可以使用内联的下一个代码：

<a href="javascript:void(0);" onclick="document.getElementById(\'bookmark\').scrollIntoView();"> link text </a>
<div id="bookmark">Jump to here</div>
于 2021-02-19T22:03:22.180 回答