We Keep Coding

Animate scroll when button taped

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);
});
});

window.load and document.load in firefox and chrome

Hi i have big problem with
$(window).load(function() { // this not working in chrome
and
$(document).load(function() { // this not working in firefox
if i use the first it will not be fired in chrome
if i use the second it will not be fired in firefox
How to fix that ?
im trying to do the scroll the page like that
<script type="text/javascript">
$(document).load(function() {
$("html, body ").animate({ scrollTop: $(document).height() }, 10);
});
$(document).ready(function () {
// some othe code here which doesnt affect anything just to show that im using document ready here
});
</script>
If someone wonder , im also changing this $(window).height() in the code to document
EDIT
$(document).load(function() {
$("html, body , #mydiv1,#mydiv2").animate({ scrollTop: $(document).height() }, 10);
});
$(document).ready(function () {
var $window = $(document),
$stickyEl = $('#listholder'),
elTop = $stickyEl.offset().top;
$window.scroll(function() {
$stickyEl.toggleClass('sticky', $window.scrollTop() > elTop);
});
scroll("#mydiv1,#mydiv2");
});

Scroll to top only on mobile

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)
}

jQuery - slideDown on mouseenter > delay > SlideUp on mouseleave

I have created a very simple jQuery sliding function that works, but requires improvements. The basic timeline of the function needs to:
SlideDown on mouseenter
Stay visible until mouseleave
When mouseleaves, delay the SlideUp by 2 seconds
^^This works, but if you slide up and down several times, the function stops working for a few seconds. Can anyone please suggest a solution? JS FIDDLE attached
JSFIDDLE: http://jsfiddle.net/lord_dev/b1g50eqk/4/
$(document).ready(function(){
$hover = true;
$( "#slide" ).mouseenter(function() {
if($hover) {
$( ".slide--hidden" ).slideDown('fast');
}
});
$( "#slide" ).mouseleave(function() {
$hover = false;
$( ".slide--hidden" ).delay(2000).slideUp('fast').queue(function(){
enableHover();
$(this).dequeue();
});
});
function enableHover() {
$hover = true;
}
});

Replace your javascript with this. It works great if i understood your problem correctly.
$(document).ready(function(){
var thetimeout;
$('#slide').mouseover(function() {
clearTimeout(thetimeout);
$('.slide--hidden').slideDown();
});
$('#slide').mouseleave(function() {
thetimeout = setTimeout(function() {
$('.slide--hidden').slideUp();
}, 2000);
});
});

scroll to a div on page

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;
});});