Is is possible to both scroll to an anchor and define a variable in the fragment in a URL?

Question

Is is possible to both define an anchor to scroll to a URL and set a variable in the frament? I tried with code the below, but this does not work in Chrome. Can I make it work using another delimiter than the ampersand?

<!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 with the code above: http://jsfiddle.net/janaagaard/FHdQr/

Hello John, this does not really scrolls down.. it just teleports to there. I have some javascript if you would like? it's some smooth scroller :) — Ryan de Vries, Jun 24 '13 at 07:44
No, that's not possible. `#bottom&test=testing` would refer to an element with that exact id. GET parameters belong in the query string, and that comes before the fragment identifier in a URL. If you where to change a GET parameter, that would make it a new resource, that the browser has to download when the link is clicked. — CBroe, Jun 24 '13 at 07:53
Thanks for the comments. I will probably use a script to scroll down, since this will also make it possible to provide smooth scrolling, as it has been pointed out. — Jan Aagaard, Jun 24 '13 at 07:58
What do you mean by set a variable? What sort of variable do you want to set? Is it a JavaScript variable, a form variable, a server variable, a query string variable, or something else? — BoltClock, Jun 24 '13 at 08:00
CBroe, could you post your comment as an anwser, so that I can accept it? — Jan Aagaard, Jun 24 '13 at 10:20

Sumurai8 · Answer 1 · 2013-06-24T08:48:08.797

As pointed out before #bottom&var=value will not work. The page will scroll to the element with id="bottom&var=value". The page scrolls down without reloading.

?var=value#bottom would reload the page with that variable and scroll to the element with id="bottom" on that new page. This is useful if you need to know the value of the 'var' variable on the server to perform some server-side action. E.g. In PHP you would see the value value in $_GET['var'].

If you need to change something with javascript and want to alter a variable because of that reason, you should use the onclick event (either by using it in-line or binding it to the element in an other way). Usually you wouldn't want to change a variable, but do whatever you need to do in a (nameless) function instead. This is useful if you want to do a client-side action.

Edit: I quickly want to add. To do a server-sided action, you don't necessarely need to reload the page. Lookup ajax-requests if you need to do that. This is done with javascript.

score -1 · Accepted Answer · edited May 23 '17 at 12:21

-1

No, it's not possible to both link to an anchor and use the fragment for storing variables.

I ended up scrolling the page using JavaScript, using this answer as a template: https://stackoverflow.com/a/4801719/37147.

edited May 23 '17 at 12:21

Community

1
1

answered Jun 24 '13 at 08:10

Jan Aagaard

10,940
8
45
80

2

You could quote CBroe's comment or ask CBroe to reproduce it in a separate answer - I think that'd satisfy the 30-character limit just fine. – BoltClock Jun 24 '13 at 08:12
This constitutes as an answer? – asprin Jun 24 '13 at 08:13
I asked a simple yes-or-question, and since the answer is no, there is no need to elaborate, so yes, this constitutes an answer. If CBroe posts his comment as an answer, I will select that one instead. – Jan Aagaard Jun 24 '13 at 08:21
Technically, the answer is indeed no, but the character limit is there to say that there *is* a need to elaborate. When you're answering your own question you'll want to justify the effort you put into your question by putting effort into a good answer as well. – BoltClock Jun 24 '13 at 08:29
Fair enough. I have asked CBroe to post his comment as an answer and I will include the solution I chose here in my own answer. – Jan Aagaard Jun 24 '13 at 10:22

score -2 · Answer 3 · answered Jun 24 '13 at 07:57

-2

I would preffer this if I were you:

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
}

Put this in your HTML next to an ID orso:

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

the -10 stands for the pixels he will be above or beneath the place you want to scroll to.

answered Jun 24 '13 at 07:57

Ryan de Vries

676
4
13

Why would you put all this effort into not answering the question? – BoltClock Jun 24 '13 at 07:59
As I said in the comment before: it's not possible and it is not scrolling smooth. So I have posted another possibility, something that scrolls smoothly – Ryan de Vries Jun 24 '13 at 08:00
1

The question isn't about smooth scrolling. You're not answering the question, you're just posting code into an answer based on a comment of your own that's totally unrelated to the question. That's not what the answer field is for. – BoltClock Jun 24 '13 at 08:00
it is just an idea for him, maybe he has never though of this and he would maybe like this even more! just trying my best for the people here :) you don't have to be so offensive.. – Ryan de Vries Jun 24 '13 at 08:03

Is is possible to both scroll to an anchor and define a variable in the fragment in a URL?

3 Answers3