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);
https://jsfiddle.net/f6xr93b7/
But having the browser in fullscreen mode, does not work
2 Answers
Answers 1
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>Answers 2
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:
$('#leitor').animate({ scrollTop: $(".backTop").offset().top }, 150);
0 comments:
Post a Comment