I want to get to the top of the page but only on mobile, not in window/computer.
This is the code I use:
$(document).ready(function () {
$(window).scroll(function () {
if ($(this).scrollTop() > 100) {
$('.scrollup').fadeIn();
} else {
$('.scrollup').fadeOut();
}
});
$('.scrollup').click(function () {
$("html, body").animate({
scrollTop: 0
}, 600);
return false;
});
Does anybody now how to do that?
Yep.
This code should detect most mobile browsers.
$('.scrollup').click(function () {
if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
$("html, body").animate({
scrollTop: 0
}, 600);
return false;
}
});
Check out this answer for some more info: What is the best way to detect a mobile device in jQuery?
The above methods didn't work for me on mobile browsers: then I used the below code and worked properly:
first, need to define an id for your page container as body-container then:
document.getElementById('body-container').scrollTo(0, 0)
in angular I put this code in router.events to trigger it after any routing:
router.events.subscribe((event: Event) => {
document.getElementById('body-container').scrollTo(0, 0)
}
Related
As described in the title, here's the code. It won't work on the first click after refresh of page.
$(document).ready(function () {
//Check to see if the window is top if not then display button
$(window).scroll(function () {
if ($(this).scrollTop() > 100) {
$('#myBtn').fadeIn();
} else {
$('#myBtn').fadeOut();
}
});
});
function topFunction() {
//Click event to scroll to top
$('#myBtn').click(function () {
$('html, body').animate({ scrollTop: 0 }, 200);
return false;
});
}
$(document).ready(function () {
//Check to see if the window is top if not then display button
$(window).scroll(function () {
if ($(this).scrollTop() > 100) {
$('#myBtn').fadeIn();
} else {
$('#myBtn').fadeOut();
}
});
//Click event to scroll to top
$('#myBtn').click(function () {
$('html, body').animate({ scrollTop: 0 }, 200);
return false;
});
});
Checkout this,
You had not triggered your topFunction on ready.
$(document).ready(function () {
topFunction();
//Check to see if the window is top if not then display button
$(window).scroll(function () {
if ($(this).scrollTop() > 100) {
$('#myBtn').fadeIn();
} else {
$('#myBtn').fadeOut();
}
});
});
function topFunction() {
//Click event to scroll to top
$('#myBtn').click(function () {
$('html, body').animate({ scrollTop: 0 }, 200);
return false;
});
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p>test</p><p>test</p><p>test</p>
<p>test</p><p>test</p><p>test</p>
<p>
<button id="myBtn" onclick="topFunction"> ScrolTop </button>
test</p>
<p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p>
Only had to take out click function outside the other function.
Good Evening,
I have been trying to animate a scroll-feature when tapping on a button. Below you will find the code that isn't working, my question is why.
$(document).ready(function () {
$('a[href="#panel-body"]').on('click', function (event) {
if(this.hash !== "") {
event.preventDefault();
var hash = this.hash;
$("html, body").animate({
scrollTop: $(hash).offset().top
}, 800 function () {
window.location.hash = hash;
});
}
});
});
I have assigned a link with the href="#panel-body". Tried with different variants and searched for a solution, still haven't managed to solve it.
Thanks for the help in advance!
I just found out that you want to create Up Going Button, For do this use the code below :
$(document).ready(function () {
$('button').click(function () {
$('html, body').animate({
scrollTop: '0px'
}, 750);
});
});
I'm trying to scroll the page upon a .click event. Here is what I have so far:
jQuery:
function scrollToStart() {
$("#scrollToStart").click(function() {
$("#startHere").animate({ scrollTop: 0 }, "slow");
return false;
});
}
HTML:
<a href="#startHere" id="scrollToStart">
<img class="img-center" src="images/get-started.png"/>
</a>
When I click, it doesn't do anything. What did I do wrong?
this should work
$("#scrollToStart").click(function (){
$('html, body').animate({
crollTop: $("#startHere").offset().top
}, 2000);
});
a working fiddle
http://jsfiddle.net/tvTUu/
Use
$('html,body').animate({
scrollTop: $("#divToBeScrolledTo").offset().top;
});
with scrollTop: 0 you always scroll to the top of the page.
More information you can find here (With live-Demo):
http://css-tricks.com/snippets/jquery/smooth-scrolling/
$(function(){// when dom loaded
$("#scrollToStart").click(function (){
$(document.body).animate({
scrollTop: 0
});
});
});
I works for me.
If I understood the question properly, you need to scroll your page to the top position on the click event, with an animation effect. I did something similar not long ago, here is the JavaScript code.
innerAnimationStep = 25;
innerScrollStep = 1;
function scrollTopAnimated(scrollStep, animationStep)
{
try
{
innerScrollStep = scrollStep;
innerAnimationStep = animationStep;
scrollTopAnimationStep();
}
catch(e)
{
console.log(e.message);
}
}
function scrollTopAnimationStep()
{
try
{
var jDocument = $(document);
if(jDocument.scrollTop() > 0)
{
jDocument.scrollTop( jDocument.scrollTop() - innerScrollStep );
setTimeout(scrollTopAnimationStep, innerAnimationStep);
}
}
catch(e)
{
console.log(e.message);
}
}
Just call scrollTopAnimated to get the page scroll with animated effect. I hope it can help.
$("#scrollToStart").bind('click',function() {
$('body , html').animate(
{
scrollTop : $("#startHere").offset().top
} , 2000 ) ;
});
http://justprogrammer.com/2013/06/21/scroll-to-specifically-element-in-browser/
http://justprogrammer.com/2013/06/25/jquery-basic-concepts/
$( document ).ready(function(){
$("#scrollToStart").click(function() {
$("#startHere").animate({ scrollTop: 0 }, "slow");
return false;
});});
I've made this little snippet to scroll the window to the top of the page.
$(window).scroll(function(){
$("#scrollup").fadeIn("slow");
});
$("#scrollup").click(function(){
$('html, body').animate({ scrollTop: 0 }, 'normal', function() {
$("#scrollup").fadeOut("slow");
});
});
However, when the scrollup div fades out after the window scrolls, it fades back in. How do I stop this from happening? Thanks.
I think I have found a reasonable solution
$(window).scroll(function(){
if ($(this).scrollTop() > 100) {
$('.scrollup').fadeIn();
} else {
$('.scrollup').fadeOut();
}
});
Would this be easier than changing my original code?
Check out .stop(): http://api.jquery.com/stop/
$(window).scroll(function(){
if ($(this).scrollTop() > 100) {
$('.scrollup').stop().fadeIn();
} else {
$('.scrollup').stop().fadeOut();
}
});
You should make sure that the scrollup div isn't faded in when you are at the top or when it is already faded in ( visible )
$(window).scroll(function(){
if ( $(window).scrollTop() !== 0 or $("#scrollup").is(":hidden") ) then {
$("#scrollup").fadeIn("slow");
}
});
You could just add an if statement to check if it is at the top:
$(window).scroll(function(){
if($("body").scrollTop()!=0)
$("#scrollup").fadeIn("slow");
});
$("#scrollup").click(function(){
$('html, body').animate({ scrollTop: 0 }, 'normal', function() {
$("#scrollup").fadeOut("slow");
});
});
I have the following code:
// hide #back-top first
$("#back-top").hide();
// fade in #back-top
$(function () {
$(window).scroll(function () {
if ($(this).scrollTop() > 150) {
$('#back-top').fadeIn();
} else {
$('#back-top').fadeOut();
}
});
// scroll body to 0px on click
$('#back-top a').click(function () {
$('body,html').animate({
scrollTop: 0
}, 900);
return false;
});
});
When you click on back to top it work's fine in IE6 - but when the fadeIn and fadeOut 'back to top' doesn't seem to work in IE6.
Try this
$(window).scrollTop() is the one that worked for me in all the current browsers
or
window.scroll(x, y);