I've got an empty link:

<a href="#" id="stop-point-btn">+ add stop-point</a>

bound to a JS function:

$("#stop-point-btn").bind("click", addStopPoint);

which simply adds some content in a div:

function addStopPoint() {
    $("#stop-point-content").append(stopPointHtml())
}

Upon click, if I have scrolled a bit down, it moves me back to the top of the page (of course, because of the provided # empty id value). But how can I make it so that the position, of where I am at the page, does not change (meaning the scroll position).

I've got an empty link:

<a href="#" id="stop-point-btn">+ add stop-point</a>

bound to a JS function:

$("#stop-point-btn").bind("click", addStopPoint);

which simply adds some content in a div:

function addStopPoint() {
    $("#stop-point-content").append(stopPointHtml())
}

Upon click, if I have scrolled a bit down, it moves me back to the top of the page (of course, because of the provided # empty id value). But how can I make it so that the position, of where I am at the page, does not change (meaning the scroll position).

• javascript
• jquery
• html
• css

4 Answers 4

replace the href value in javascript:void(0); and the click on the link will produce no effect

<a href="javascript:void(0);" id="stop-point-btn">+ add stop-point</a>

Use preventDefault().

 $("#stop-point-btn").bind("click", function(e) {
        e.preventDefault();
        addStopPoint();
    });

And keep in mind:

As of jQuery 1.7, the .on() method is the preferred method for attaching event handlers to a document. For earlier versions, the .bind() method is used for attaching an event handler directly to elements.

Pass event as an argument to your function and add this statement. event.preventDefault() inside of addstoppoint function.

You need to pass href value is javascript:void(0); which return undefined that's why browser stays on the same page and do not scroll page.

<a href="javascript:void(0);" id="stop-point-btn">+ add stop-point</a>