ScrollTop in FullScreen jQuery

Question

When the browser is normal mode, the user can click a button and scroll to a div at the top of the page :

$('html,body').animate({scrollTop:$('.backTop').offset().top}, 150);

But having the browser in fullscreen mode, does not work

You want it to not scroll to the top if it's in full-screen mode? What goes wrong with what you've tried? — showdev, Sep 05 '18 at 00:22
no, I want you to scroll to the top if it is normal screen or full screen. — sNniffer, Sep 05 '18 at 01:00
The way it works only in the normal theme, full screen nothing happens. — sNniffer, Sep 05 '18 at 01:01
You shouldn't need to check if it's fullscreen or not. jQuery will find the position of the element no matter which mode you're in. It's not working in fullscreen because you litterally have a condition (if) that says, if its not in fullscreen then scroll up. Get rid of the var and if, just keep the .animate line.. — VVV, Sep 05 '18 at 01:02
that's not the problem, I've already removed `if` to test and it still does not work — sNniffer, Sep 05 '18 at 18:51
When you have this kind of problem make sure that you are coming with full code next time. — Ramesh, Sep 06 '18 at 03:10

score 1 · Answer 1 · answered Sep 06 '18 at 03:06

I think this is what you are looking for. First of all you need to set a hyperlink to the section that you want to scroll. In my case it #top. Then some jquery codes for smooth scrolling.

Run the sippet, Go the bottom of the page ( to the blue coloured section). Click on the white box on bottom, right .

// Add smooth scrolling to all links
$("a").on('click', function(event) {

  // Make sure this.hash has a value before overriding default behavior
  if (this.hash !== "") {
    // Prevent default anchor click behavior
    event.preventDefault();

    // Store hash
    var hash = this.hash;

    // Using jQuery's animate() method to add smooth page scroll
    // The optional number (800) specifies the number of milliseconds it takes to scroll to the specified area
    $('html, body').animate({
      scrollTop: $(hash).offset().top
    }, 800, function() {

      // Add hash (#) to URL when done scrolling (default click behavior)
      window.location.hash = hash;
    });
  } // End if
});

#top {
  height: 300px;
  width: 100%;
  background: red;
}

#second {
  height: 300px;
  width: 100%;
  background: blue;
}

.icon {
  height: 30px;
  width: 30px;
  position: fixed;
  bottom: 20px;
  right: 20px;
  background: white;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="top">
</div>
<div id="second">
</div>
<a href="#top">
  <div class="icon">
  </div>
</a>

@sNniffer What do you mean by fulscreen. If the section in visible in the fullscreen you won't be direct to the section. Can you elaborate your problem sir? — Ramesh, Sep 06 '18 at 03:33
is simple, fullscreen mode my friend https://jsfiddle.net/sirfizx/2jkt3z5e , simply by clicking a button in full screen mode, the screen will be directed to the div, the same thing you said, but in full screen mode. The title of the post is exactly this — sNniffer, Sep 06 '18 at 04:06
So you are using a iframe here? Can you please update the question with your HTML code — Ramesh, Sep 06 '18 at 04:54
I am not sure about your question. When I inspect your code, I could see your html in fullscreen is inside a iframe. So the question is not about just ScrollTop, it's about ScrollTop inside iframe. I have gone through few examples and I was unable to comeup with a answer. This seems a little new to me. So it take time. I will let you know , if I find out any solution. — Ramesh, Sep 06 '18 at 15:37
You can get some ideas here : https://stackoverflow.com/questions/1852518/how-to-get-scrolltop-of-an-iframe — Ramesh, Sep 06 '18 at 15:39

score 1 · Accepted Answer · edited Apr 07 '20 at 19:49

Resolved:

Simply by using:

$('html,body').animate({scrollTop:$('.backTop').offset().top}, 150);

was assigning to the scroll of the body, but should be assigning to the scroll of the div that is in fullscreen, getting:

(First we need to put the scroll in the beggining to take the offset measure correctly)

$('#leitor').scrollTop(0); $('#leitor').animate({ scrollTop: $(".backTop").offset().top }, 150);

ScrollTop in FullScreen jQuery

2 Answers2