JavaScript function jumps to the top of the window

Question

Update/Solution

I have three options to prevent the view from being pushed to the top of the page:

set the href to href="#!"
set the href to href="javascript:;"
pass the object to the event-handler and prevent the default action with the following code.

Example:

$('#lang1_special_chars').on("click", ".lang1_char", function(e){
    e.preventDefault();
    // Rest of the code
});

Thanks to @[Scott Brown] and @Barmar

The Problem

I am using the following script to add one or more character to an input field. Unfortunately, after successfully adding the character, the function makes the view jump to the top of the window. The focus stays on the input field.

The view position should keep and shall not move. I use the code from this question: inserting a text where cursor is using Javascript/jquery. The focus must stay on the input field.

My function (copied):

function insertAtCaret(areaId,text, jumpTo) {
    var txtarea = document.getElementById(areaId);
    var scrollPos = txtarea.scrollTop;
    var strPos = 0;
    var br = ((txtarea.selectionStart || txtarea.selectionStart == '0') ?
        "ff" : (document.selection ? "ie" : false ) );
    if (br == "ie") {
        txtarea.focus();
        var range = document.selection.createRange();
        range.moveStart ('character', -txtarea.value.length);
        strPos = range.text.length;
    }
    else if (br == "ff") strPos = txtarea.selectionStart;

    var front = (txtarea.value).substring(0,strPos);
    var back = (txtarea.value).substring(strPos,txtarea.value.length);
    txtarea.value=front+text+back;
    strPos = strPos + text.length;
    if (br == "ie") {
        txtarea.focus();
        var range = document.selection.createRange();
        range.moveStart ('character', -txtarea.value.length);
        range.moveStart ('character', strPos);
        range.moveEnd ('character', 0);
        range.select();
    }
    else if (br == "ff") {
        txtarea.selectionStart = strPos;
        txtarea.selectionEnd = strPos;
        txtarea.focus();
    }
    txtarea.scrollTop = scrollPos;
}

And this is how I call the function:

$('#lang1_special_chars').on("click", ".lang1_char", function(){
    var text = $(this).data('char');
    insertAtCaret('word_lang1', text);
});

And this is the html-code:

<div class="input-field">
    <input type="text" id="word_lang1" placeholder="Pal" required="" class="validate" tabindex="1">
    <label for="word_lang1" class="active">Deutsch</label>
    <div id="lang1_special_chars">
        <a href="#" class="lang1_char" data-char="Ä">
            <div class="chip orange lighten-2">Ä</div>
        </a>
        <a href="#" class="lang1_char" data-char="ä">
            <div class="chip orange lighten-2">ä</div>
        </a>
        <a href="#" class="lang1_char" data-char="Ö">
            <div class="chip orange lighten-2">Ö</div>
        </a>
        <a href="#" class="lang1_char" data-char="ö">
            <div class="chip orange lighten-2">ö</div>
        </a>
        <a href="#" class="lang1_char" data-char="Ü">
            <div class="chip orange lighten-2">Ü</div>
        </a>
        <a href="#" class="lang1_char" data-char="ü">
            <div class="chip orange lighten-2">ü</div>
        </a>
        <a href="#" class="lang1_char" data-char="ß">
            <div class="chip orange lighten-2">ß</div>
        </a>
    </div>
</div>

Thanks!

Can you post it as a JSfiddle or snippet? This will be easier to test. — raphv, Jun 01 '16 at 14:32

score 4 · Accepted Answer · answered Jun 01 '16 at 14:36

4

It's likely because you're calling href="#" in your a tags. Change it to href="javascript:;". This will stop it attempting to jump to any named anchor.

answered Jun 01 '16 at 14:36

Thanks! Works great. Another option is to set the ```href```to ```href='#!'```. – Brotzka Jun 02 '16 at 04:09

score 1 · Answer 2 · answered Jun 01 '16 at 14:43

Change the handler to disable the default action of following the link, by calling event.preventDefault();.

$('#lang1_special_chars').on("click", ".lang1_char", function(e){
    e.preventDefault();
    var text = $(this).data('char');
    insertAtCaret('word_lang1', text);
});

JavaScript function jumps to the top of the window

Update/Solution

The Problem

2 Answers2