Brotzka Brotzka - 4 months ago 6x
jQuery Question

JavaScript function jumps to the top of the window


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

  • set the href to

  • set the href to

  • pass the object to the event-handler and prevent the default action with the following code.


$('#lang1_special_chars').on("click", ".lang1_char", function(e){
// 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") {
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);
strPos = strPos + text.length;
if (br == "ie") {
var range = document.selection.createRange();
range.moveStart ('character', -txtarea.value.length);
range.moveStart ('character', strPos);
range.moveEnd ('character', 0);;
else if (br == "ff") {
txtarea.selectionStart = strPos;
txtarea.selectionEnd = strPos;
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 href="#" class="lang1_char" data-char="ä">
<div class="chip orange lighten-2">ä</div>
<a href="#" class="lang1_char" data-char="Ö">
<div class="chip orange lighten-2">Ö</div>
<a href="#" class="lang1_char" data-char="ö">
<div class="chip orange lighten-2">ö</div>
<a href="#" class="lang1_char" data-char="Ü">
<div class="chip orange lighten-2">Ü</div>
<a href="#" class="lang1_char" data-char="ü">
<div class="chip orange lighten-2">ü</div>
<a href="#" class="lang1_char" data-char="ß">
<div class="chip orange lighten-2">ß</div>



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.