Animate easing for scrollTop - javascript

How to animate easing for scrollTop? I'm using scrollTop to move div element when site is scrolled. I want div element to move smoothly not jumping so sharply.
Here is the code:
jQuery(window).scroll(function() {
if (jQuery(window).scrollTop() > 20 ) {
jQuery('.topBar').css({
'position':'fixed',
'top':-40,
'bottom':""
});
}
else {
jQuery('.topBar').css({
'position':'fixed',
'top':0,
'bottom':""
});
}
});

did you try animating the topBar tag then?
jQuery(window).scroll(function () {
if (jQuery(window).scrollTop() > 20) {
jQuery('.topBar').animate({
top: "40"
}, 300, function () {
jQuery(this).addClass('scrolled');
});
} else {
jQuery('.topBar').animate({
top: "0"
}, 300, function () {
jQuery(this).removeClass('scrolled');
});
}
});
I've created following fiddle to illustrate what i mean:
http://jsfiddle.net/2d3mxm5a/

Related

Back to top scroll jquery is not working in chrome. Why. Its works fine in firefox

http://jsfiddle.net/gilbitron/Lt2wH/
it work when i open in chrom browser. but not in my project. am using bootstrap css and js file.
if ($('#back-to-top').length) {
var scrollTrigger = 100, // px
backToTop = function () {
var scrollTop = $(window).scrollTop();
if (scrollTop > scrollTrigger) {
$('#back-to-top').addClass('show');
} else {
$('#back-to-top').removeClass('show');
}
};
backToTop();
$(window).on('scroll', function () {
backToTop();
});
$('#back-to-top').on('click', function (e) {
e.preventDefault();
$('html,body').animate({
scrollTop: 0
}, 700);
});
}
Some have answer it in the link Scroll to top button not working in chrome or safari. but not works for me.
Thanks in advance.
You should place your js inside the $(document).ready() function. Like this:
$( document ).ready(function() {
if ($('#back-to-top').length) {
var scrollTrigger = 100, // px
backToTop = function () {
var scrollTop = $(window).scrollTop();
if (scrollTop > scrollTrigger) {
$('#back-to-top').addClass('show');
} else {
$('#back-to-top').removeClass('show');
}
};
backToTop();
$(window).on('scroll', function () {
backToTop();
});
$('#back-to-top').on('click', function (e) {
e.preventDefault();
$('html,body').animate({
scrollTop: 0
}, 700);
});
}
});

jquery scrolling function not working properly

I'm using this code to change position when scroll. The problem is when scrolled to top of the page css top:'0px' not working.
Here is the code.
window.onload = function() {
var stickySidebar = $('.bk-form-wrap').offset().top;
var $div = $('div.bk-form-wrap');
$(window).scroll(function() {
if ($(window).scrollTop() > stickySidebar) {
$div.css({
position:'fixed',
height: '70px'
});
$div.animate({
top: '95px',
//top:'100%',
// marginTop: - $div.height()
});
}
else {
}
if ($(this).scrollTop() == 0) {
//Call your event here
$div.css({
position:'relative',
});
$div.animate({
top:'0px',
});
}
});
};
And link to page. Plese help. Thanks.
Try this.
var $div = $('div.bk-form-wrap');
$(window).scroll(function() {
var stickySidebar = $('.bk-form-wrap').offset().top;
if ($(window).scrollTop() > stickySidebar) {
$div.css({
position:'fixed',
height: '70px'
},1000);
$div.animate({
top: '95px'
//top:'100%',
// marginTop: - $div.height()
});
}
else if ($(window).scrollTop() == 0) {
//Call your event here
$div.css({
position:'relative'
});
$div.animate({
top: '0px'
},500);
}
});

Resize Header On Scrolling

I'm trying to change the header size (which I named #headwrapper) and its background color when scrolling down. As you can see I need it to trigger the class .small when scrolling is > 145.
It is working only when I minimize the screen's width to 600px or less.
I have this problem since I had to change the very last line from height: '130px' to height: 'auto'; max-height: '1000px'. This in order to fully see the drop down menu triggered when the screens width is 600px. It was cutting in half with height 130px.
This is the script:
$(window).scroll(function () {
var sc = $(window).scrollTop()
if (sc > 145) {
$("#pageheader, #headwrapper, #main-nav, .logos, #social, #main- logo").addClass("small");
}
else {
$("#pageheader, #headwrapper, #main-nav, .logos, #social, #main- logo").removeClass("small")
}
});
$(function(){
$('#headwrapper').data('size', 'big');
});
$(window).scroll(function(){
if ($(document).scrollTop() > 200) {
if ($('#headwrapper').data('size') == 'big') {
$('#headwrapper').data('size', 'small');
$('#headwrapper').stop().animate({
height:'75px'
}, 400);
}
} else {
if ($('#headwrapper').data('size') == 'small') {
$('#headwrapper').data('size', 'big');
$('#headwrapper').stop().animate({
height: 'auto';
max-height: '1000px'
}, 400);
}
}
});
You have an error in the animate object syntax. Replace the ; with , and quote them:
$('#headwrapper').stop().animate({
"height": 'auto', // Change ; to , as this is an object.
"max-height": '1000px'
}, 400);
And move everything inside the document's ready function:
$(function() {
$('#headwrapper').data('size','big');
$(window).scroll(function () {
var sc = $(window).scrollTop();
if (sc > 145) {
$("#pageheader,#headwrapper,#main-nav,.logos,#social,#main- logo").addClass("small");
}
else {
$("#pageheader,#headwrapper,#main-nav,.logos,#social,#main- logo").removeClass("small");
}
});
$(window).scroll(function() {
if($(document).scrollTop() > 200) {
if($('#headwrapper').data('size') == 'big') {
$('#headwrapper').data('size','small');
$('#headwrapper').stop().animate({
height:'75px'
},400);
}
}
else
{
if($('#headwrapper').data('size') == 'small') {
$('#headwrapper').data('size','big');
$('#headwrapper').stop().animate({
"height": 'auto',
"max-height": '1000px'
},400);
}
}
});
});

How to make slow the Scroll-Top Speed

ScrollTop is a jquery plugin (go to top of page), trying to make slow Scroll Speed, but not working. I have changed scrollSpeed : 'fast', to scrollSpeed : 'slow', but it still fast, nothing change.
JS:
$.fn.extend({
addScrollTop: function(options) {
var defaults = {
useObjWindow : false,
scrollSpeed : 'fast',
zIndex: '99'
}
var options = $.extend(defaults, options);
if($('body').find('.scrollTop-btn').length == 0) {
$('body').append('<div class="scrollTop-btn" style="display:none;"><i class="fa fa-chevron-up"></i></div>');
}
if(options.useObjWindow) {
var parentWindow = this;
var scrollWindow = this;
}
else {
var parentWindow = window;
var scrollWindow = 'html, body';
}
$(document).ready(function() {
$('.scrollTop-btn').on('click', function() {
$(scrollWindow).animate({scrollTop:0}, options.scrollSpeed);
});
$(parentWindow).scroll(function() {
$('.scrollTop-btn').hide();
var aTop = $('.scrollTop-btn').height() + 20;
if($(this).scrollTop() >= (aTop + 20)) {
$('.scrollTop-btn').css('z-index', options.zIndex);
$('.scrollTop-btn').show();
}
else {
if($('.scrollTop-btn').is(":visible")) {
$('.scrollTop-btn').hide();
}
}
});
});
}
});
Call:
jQuery(document).ready(function() {
jQuery("body").addScrollTop();
});
How to make it slower or smoother, when it go to top?
use jquery animate()
$('html,body').animate({ scrollTop: 0 }, 'slow');
refer this stack overflow question
Only with CSS:
html {
scroll-behavior: smooth;
}
Using jQuery
If you want you can customize how much time you would like the "scrolling" to last. Or do something else when scroll effect is finished.
I have a: <a href="#" class="scrollToTop">
And want to scroll to an element with class "beginning"
$('.scrollToTop').on('click', function(event){
event.preventDefault();
$('html, body').stop().animate({scrollTop: $('.beginning').offset().top}, 500);
});
The last part where you have the 500. You can set there how much time you want the effect to last. In milliseconds.
http://api.jquery.com/animate/
Replace 'slow' with - Ex. 1000, 5000, 10000
$('html,body').animate({ scrollTop: 0 }, <milliseconds>);
// Scroll 2 sec
$('html,body').animate({ scrollTop: 0 }, 2000);
// Scroll 5 sec
$('html,body').animate({ scrollTop: 0 }, 5000);

Scrolling large image inside a div

I have an large image inside a small div. Inside that div there are 4 arrows to control the movement, right, bottom, left and top. The arrows are used to move the image inside that smaller div.
This is the JS code
$('.slide-right').click(function() {
$('.inner img').animate({ "right": "+=50px" }, "slow" );
});
$('.slide-bottom').click(function() {
$('.inner img').animate({ "bottom": "+=50px" }, "slow" );
});
$('.slide-left').click(function() {
$('.inner img').animate({ "left": "+=50px" }, "slow" );
});
$('.slide-top').click(function() {
$('.inner img').animate({ "top": "+=50px" }, "slow" );
});
And this is the html:
<div id="content">
<div class="image-box">
<div class="inner"><img alt="" src="http://s15.postimg.org/5phzr2off/img.jpg" id="image" /></div>
<div id="arrow-up"><img alt="" src="http://s24.postimg.org/gr2uv14d1/arrow_top.png" /></div>
<div id="arrow-right"><img alt="" src="http://s24.postimg.org/ruda95avp/arrow_right.png" /></div>
<div id="arrow-bottom"><img alt="" src="http://s10.postimg.org/n8hv0166x/arrow_bottom.png" /></div>
<div id="arrow-left"><img alt="" src="http://s2.postimg.org/qrpm662u1/arrow_left.png" /></div>
</div>
</div>
Demo: http://jsfiddle.net/john_bale96/C26rV/
I would like to make the animation to stop when the edge of the image is reached. Can someone give me some clues on how to do this ?
You have to consider that, at the beginning, your image is left:0px and top:0px.
So you already have your left and top limite.
$('.slide-left').click(function () {
if ($('.inner img').position().left + 50 < 0) {
$('.inner img').animate({
"left": "+=50px"
}, "slow");
}
});
$('.slide-top').click(function () {
if ($('.inner img').position().top + 50 < 0) {
$('.inner img').animate({
"top": "+=50px"
}, "slow");
}
});
Then, you can get the right and bottom limite. This is your image size.
var limiteRight = 0 - $('.inner img').width() + $('.image-box').width();
var limiteBottom = 0 - $('.inner img').height() + $('.image-box').height();
$('.slide-right').click(function () {
if ($('.inner img').position().left - 50 > limiteRight) {
$('.inner img').animate({
"left": "-=50px"
}, "slow");
}
});
$('.slide-bottom').click(function () {
if ($('.inner img').position().top - 50 > limiteBottom) {
$('.inner img').animate({
"top": "-=50px"
}, "slow");
}
});
And you finnaly have to check if your desired new position is within this container. If not, just go to the limite.
$('.slide-right').click(function () {
if ($('.inner img').position().left - 50 > limiteRight) {
$('.inner img').animate({
"left": "-=50px"
}, "slow");
} else {
$('.inner img').animate({
"left": limiteRight
}, "slow");
}
});
FIDDLE with full exemple.
The basic approach would be to compare the image position with the containing div position:
var inner = $(".inner").first();
var divTop = inner.offset().top;
var divLeft = inner.offset().left;
var divRight = divLeft + inner.width();
var divBottom = divTop + inner.height();
function getImagePosition() {
var image = $("#image");
var imageTop = image.offset().top;
var imageLeft = image.offset().left;
return {
top: imageTop,
left: imageLeft,
right: imageLeft + image.width(),
bottom: imageTop + image.height()
}
}
function scrollTop() {
var imagePosition = getImagePosition();
var nextImageTop = imagePosition.top + 50;
if (nextImageTop <= divTop) {
$('.slide-top').off("click");
$('.inner img').animate({
"top": "+=50px"
}, "slow", function () {
$('.slide-top').click(scrollTop);
});
}
}
$('.slide-top').click(scrollTop);
You should also unbind the arrow scrolling events while the animation happens, otherwise if the user clicks multiple times while the animation is happening, it can still scroll the image outside of the div constraints.
See this fiddle (I only implemented the rebinding for top):
http://jsfiddle.net/lhoeppner/puLDd/
Another suggestion, using jQuery UI draggable.
http://jqueryui.com/draggable/
http://jsfiddle.net/kimgysen/3twxS/1/
$("#inner").draggable({
containment: $('#content')
});
Don't change all 4 top right bottom left, as you'll end up with stuff like right:1000px; left:1000px; etc... and it'll probably break the thing.
Focus on using just 2 of them instead, i'd recommend just using top and left
So to go right, you'd do left += 50px to go left you'd do left -= 50px
A simple way to resolve this solution would be to simply manually plot the contraints like this:
$('.slide-right').click(function() {
if (parseInt($('.inner img').css('left')) >= -700) {
$('.inner img').finish().animate({ "left": "-=50px" }, "slow" );
}
});
$('.slide-bottom').click(function() {
if (parseInt($('.inner img').css('top')) >= -249) {
$('.inner img').finish().animate({ "top": "-=50px" }, "slow" );
}
});
$('.slide-left').click(function() {
if (parseInt($('.inner img').css('left')) < -49) {
$('.inner img').finish().animate({ "left": "+=50px" }, "slow" );
}
});
$('.slide-top').click(function() {
if (parseInt($('.inner img').css('top')) < -49) {
$('.inner img').finish().animate({ "top": "+=50px" }, "slow" );
}
});
http://jsfiddle.net/C26rV/4/
But ideally you could do something better which would determine the dimensions of the image itself allowing it to work with any image size automatically.
Edit:
Just as a side note (It doesn't have constraints) you can use considerably less jQuery by handling sliding like this:
$('.slide').click(function () {
var sliding = {}
sliding[$(this).data('direction')] = $(this).data('movement');
$('.inner img').animate(sliding,"slow");
});
http://jsfiddle.net/C26rV/2/

Categories