Problems with SCROLLTOP

Asked

Viewed 708 times

1

I’m in trouble with scroll-top. The implemented function should take the input that I’ve been with focus is take you to the top with scroll-top, but works satisfactorily only for the first few clicks at the top of the page, and when I go down giving click it behaves unsatisfactory rather than leading to the top of the page it leads to the bottom of the page. I have observed that sometimes the value of position is negative, but this is not always.

I tried to make sure I was up space so that the field rolls up. So the problem is not in the scrolling space.

Below follows my code:

var tamanho = screen.height - 108 - 80;
var inputs = $('input').get();

$(inputs).on('focus', function () {
  $(".ajusteTeclado").css("height", tamanho + "px");
  $(".ajusteTeclado").show();
  var pos = $(this).offset(),
      position = pos.top - 60;

 // positio/q/108569/4995n = ((position < 0)? position * -1 : position);
  console.log(position);
  $(this).closest('.scrollPosition').scrollTop(position);
});

What could be ?

I need that every time the field had itself in focus it should locate to the top of the page.

javascript jquery rolling

  • Ever tried to use pos = $(this).position() instead of pos = $(this).offset()?

  • Yes, you can actually solve it. Just add $(this). Closest('.scrollPosition'). scrollTop(position); instead of position = pos.top - 60; so position = $(this). Closest('.scrollPosition'). scrollTop(position) + pos.top - 60;

  • So you put that in an answer, so we know more easily what you did.

  • Yeah, I’m just compiling project to make sure

  • Ok. Thank you for contributing to the content of the site.

1 answer

1

To solve this problem we have to understand the principle of objects:

the command $(this).offset() takes the position related to the field where the focus.

If we just take him and then run the scrolltop() we see that it will yes lead to the top, but at the first click, where all the div and the field are zeroed in the direction of movement.

The problem happens there, it is necessary to take the current position of the field in relation to div, because it can happen from div is far above the field with focus, therefore the problem that sometimes reported negative values.

So with this learning we conclude that we should take the current position of the field with Focus + the distance that the field is from the top, and in my case remove 60 px because I have an edge. The final code went like this:

var tamanho = screen.height - 108 - 80;
var inputs = $('input, textarea').get();

$(inputs).on('focus', function () {
  $(".ajusteTeclado").css("height", tamanho + "px");
  $(".ajusteTeclado").show();
  var pos = $(this).offset(),
      position = $(this).closest('.scrollPosition').scrollTop() + pos.top - 60;

 // position = ((position < 0)? position * -1 : position);
  console.log(position);
  console.log("Offset " + pos.top);
  $(this).closest('.scrollPosition').scrollTop(position);
});

Note that in position I take the distance from the field on the screen and do what I explained just above.

Browser other questions tagged javascript jquery rolling

You are not signed in. Login or sign up in order to post.