3

是否可以同时定义一个锚点以滚动到一个 URL并在框架中设置一个变量？我尝试使用下面的代码，但这在 Chrome 中不起作用。我可以使用与符号以外的其他分隔符使其工作吗？

<!doctype html>
<html>
  <head>
    <title>Scroll to anchor test</title>
  </head>
  <body>
    <p><a href="#bottom">Scroll to bottom</a> (works)</p>
    <p><a href="#bottom&test=testing">Scroll to bottom and include
      variable in the frament</a> (doesn't work)</p>
    <p style="margin-top: 2000px">Bottom of page</p>
    <p><a name="bottom">#bottom</a></p>
  </body>
</html>

JSFiddle 上面的代码：http: //jsfiddle.net/janaagaard/FHdQr/

4

3 回答 3

1

如前所述，#bottom&var=value将不起作用。页面将滚动到带有 的元素id="bottom&var=value"。页面向下滚动而不重新加载。

?var=value#bottom将使用该变量重新加载页面并滚动到该id="bottom"新页面上的元素。如果您需要知道服务器上 'var' 变量的值以执行某些服务器端操作，这很有用。例如，在 PHP 中，您会看到value.$_GET['var']

如果您需要使用 javascript 更改某些内容并因此想要更改变量，则应使用 onclick 事件（通过内联使用它或以其他方式将其绑定到元素）。通常您不想更改变量，而是在（无名）函数中做任何您需要做的事情。如果您想执行客户端操作，这很有用。

编辑：我很快想添加。要执行服务器端操作，您不必重新加载页面。如果需要，请查找 ajax-requests。这是用 javascript 完成的。

于 2013-06-24T08:36:40.503 回答
-1

不，不可能既链接到锚点又使用片段存储变量。

我最终使用 JavaScript 滚动页面，使用这个答案作为模板：https ://stackoverflow.com/a/4801719/37147 。

于 2013-06-24T08:10:14.677 回答
-2

如果我是你，我会更喜欢这个：

javascript

function GetTop(ele){
        if (ele.offsetParent)
            return (ele.offsetTop + GetTop(ele.offsetParent));
        else
            return (ele.offsetTop);
    }

    function scrollToAnchor(id,offset){
        var aTop; 
        if(id=='0')
            aTop=0;
        else


    aTop = GetTop(document.getElementById(id));
        //40px to leave room for #title
    $('body, html').animate({scrollTop:aTop+offset},900); 
    //body for chrome/safari and html for ie/firefox/opera
}

把它放在你的 HTML 中的 ID orso 旁边：

onclick="scrollToAnchor('div name to scroll to', -10)"

-10 代表他将在您要滚动到的位置上方或下方的像素。

于 2013-06-24T07:57:21.260 回答