Javascript onclick window.location for page anchors?

Question

So SOF,

I've got a little problem where I don't want #BOT to appear in my url when I click my links when using page anchors.

Javascript

$("a.bottom").click(function() {
    window.location = '#BOT';
});

Different links...

<a class="bottom" href="javascript: void(0);">BOTTOM</a>
<a href="#BOT">BOTTOM</a>

Anchor

<a id="KEY"></a>

How do I stop it adding #BOT in the pageurl bar?

@Dude Are you able to give me an example? (RGraham just posted an example) — Ryflex, Nov 05 '13 at 07:59

CodingIntrigue · Answer 1 · 2013-11-05T08:11:15.037

3

The jQuery scrollTo plugin is very good at this. It will scroll your window to an element without using anchors:

$("a.bottom").click(function() {
    $.scrollTo($("a[name='#BOT']"));
});

Would be good to make the functionality more generic too:

jQuery

$("a.scrollable").click(function() {
    $.scrollTo($("#"+$(this).data("scrollto")));
});

HTML

<a class="scrollable" data-scrollto="BOT">BOTTOM</a>
<a id="BOT"></a>
<a class="scrollable" data-scrollto="KEY">BOTTOM</a>
<a id="KEY"></a>

edited Nov 05 '13 at 08:11

answered Nov 05 '13 at 07:59

CodingIntrigue

75,930
30
170
176

that still doesn't work for me, the link isn't an actual link... O_o http://i.imgur.com/4GgbWO3.png – Ryflex Nov 05 '13 at 08:14
The plugin is added, but I see no links. Incompatible with Chrome? – Ryflex Nov 05 '13 at 08:23
I added an alert into the scrollable, the "links" work but it doesn't actually scroll to where I want it to scroll to... – Ryflex Nov 05 '13 at 08:37
@Hyflex You need to give it some content, or style it with CSS to give it a size. The target doesn't need to be an ``. It can be any DOM element – CodingIntrigue Nov 05 '13 at 08:57

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

2

This can be done using jQuery offset and animate as discussed in this question

function scrollToAnchor(aid) {
    var aTag = $("a[id='" + aid + "']");
    $('html,body').animate({
        scrollTop: aTag.offset().top
    }, 'slow');
}

$("a.bottom").click(function () {
    scrollToAnchor('BOT');
});

Fiddle here

edited May 23 '17 at 12:21

Community

1
1

answered Nov 05 '13 at 08:02

Jacques Snyman

4,115
1
29
49

Able to make a jsfiddle for that? I can't get it going in my html :/ – Ryflex Nov 05 '13 at 08:34
For sure works the best out of them all for my needs, I've got a hang of the animate speeds but how can I add some easing if i set it to fast or 1? – Ryflex Nov 05 '13 at 15:00
Replace 'slow' with 'slow', 'swing' in the animate function. For more, see http://api.jquery.com/animate/ – Jacques Snyman Nov 05 '13 at 19:13

score 1 · Answer 3 · edited Nov 05 '13 at 08:07

1

You can scroll the page by using window.scrollTo(x,y) method. Which does not need page to be refreshed.

for example:

$("a.bottom").click(function() {
    scrollTo(0,100);
});

edited Nov 05 '13 at 08:07

franzlorenzon

5,845
6
36
58

answered Nov 05 '13 at 08:03

Vicky Gonsalves

11,593
2
37
58

Javascript onclick window.location for page anchors?

Javascript

Different links...

Anchor

3 Answers3