Weird behavoir of scrolling function - javascript

What I want to achieve is a simple scroll to function, which always will scroll to same point regarding scrollTop position.
I thought using window.scroll will be a good approach here, cause I am able to read current scrollTop value, as I sad it's not workin, on some browsers I am not able to scroll(IE), on others (Chrome, Firefox) after clicking tag connected to this func. I got auto scroll behaviour, a little bit up and then a little bit down.
I don't want to use scrollTo plugin or others cause it's the only place on my page with such funcionality.
$(window).scroll(function () {
var y = $(window).scrollTop();
console.log(y);
var mainBanner = $('header').height();
if (y > 1 && y < mainBanner) {
$('#slideUpHead').click(function(){
$("html, body").animate({ scrollTop: mainBanner - y}, 600);
});
}
else if(y < 1){
$('#slideUpHead').click(function(){
$("html, body").animate({ scrollTop: y + mainBanner}, 600);
});
}
else {
}
});
here's my second approach, partially working:
myScroll = function (){
var mainBannerH = $('header').height();
var y = $(window).scrollTop();
if (y > 1 && y < mainBannerH) {
$("html, body").animate({ scrollTop: mainBannerH - y}, 600);
}
else if(y < 1){
$("html, body").animate({ scrollTop: y + mainBannerH}, 600);
}
else {
console.log("It's not working properly");
}
};
$('#slideUpHead').click(myScroll);

For the time being the following solution works just fine, thanks to Ahmad I have changed my approach and get scrollTop position a little bit differently, not 100% sure why but it works.
myScrollTo = function (){
var mainBannerH = $('header').height();
var myPos = $('html,body').scrollTop();
if ( myPos > 1 && myPos < mainBannerH) {
$("html, body").animate({ scrollTop: mainBannerH - myPos}, 600);
}
else if(myPos < 1){
$("html, body").animate({ scrollTop: myPos + mainBannerH}, 600);
}
else {
console.log("It's not working properly");
}
};
$('#slideUpHead').click(myScrollTo);

Related

How can I control the mouse scroll event and after that do an animation on the html, body?

I'm facing a very strange error, which is animation on body during mouse scroll. I think its happening because of the jQuery event window.scroll. I have tried a lot of things like unbinding of animation on mouse scroll, but nothing works. Below is my code.
$(document).on("scroll", function () {
var lastScrollTop = 0;
var windowHeight = $(window).scrollTop();
var seccion1 = $("#seccion1").height();
var seccion2 = $("#seccion2").offset().top;
var alturaseccion2 = $("#seccion2").height();
//this function returns in which section is the user with the scroll
var localizacion = comprobarSeccion(seccion1, seccion2);
if (windowHeight > lastScrollTop) {
// down scroll
console.log("scrollabajo");
if (localizacion == 1) {
$("html, body").animate({
scrollTop: $("#seccion2").offset().top
}, 2);
$(document).bind("scroll");
} else if (localizacion == 2) {
if (windowHeight >= ((alturaseccion2 * 0.80) + seccion2) && windowHeight <= (alturaseccion2 + seccion2)) {
} else {
}
}
} else {
// up scroll
console.log("scrollarriba");
}
lastScrollTop = windowHeight;
});
ยดยดยด
I'm not sure what you are trying to accomplish, but if your trying to trigger an event with a specific scroll value you can use the code below
$(window).scroll(function () {
var scroll = $(window).scrollTop();
if (scroll >= 500) {
alert("scroll is greater than 500 px)
} else if(scroll==500){
alert("scroll has hit 500px");
}
});

On scroll the active menu does not chaning

I've created a right side menu but when i scrolling down it is not changing the active class to next menu,I've used this code lots of time but this time i'm not getting the result,
$(window).scroll(function() {
var scrollbarLocation = $(this).scrollTop();
scrollLink.each(function() {
var sectionOffset = $(this.hash).offset().top - 70;
if ( sectionOffset <= scrollbarLocation ) {
$('.icons').removeClass('iconactive');
$(this).children('.icons').addClass('iconactive');
}
});
});
DEMO
you need to define scrollLink and you can give some animation effect when you click an anchor link by adding a function like this
$(document).on('click', 'a[href^="#"]', function (event) {
event.preventDefault();
$('html, body').animate({
scrollTop: $($.attr(this, 'href')).offset().top
}, 1000);
});
Demo : http://jsfiddle.net/3xmop98u/
I think you are missing var scrollLink = $('.myanimate'); in your code. Adding this line in your DEMO make the code work.
$(window).scroll(function() {
var scrollbarLocation = $(this).scrollTop();
var scrollLink = $('.myanimate');
scrollLink.each(function() {
var sectionOffset = $(this.hash).offset().top - 70;
if ( sectionOffset <= scrollbarLocation ) {
$('.icons').removeClass('iconactive');
$(this).children('.icons').addClass('iconactive');
}
});
});
$(".myanimate").click(function (){
$('html, body').animate({
scrollTop: $($(this).attr('href')).offset().top
}, 2000);
});

jquery - Swipe Page Counting

I am creating a swipe page system using the library touchSwipe.js.
With the method I have, I can swap between pages however, I cannot figure out to go back to previous page properly.
Right now if I swipe right and left few times the counting system goes out summing the swipes.
How can I make the counting system properly in order to move between pages?
var swipeRight = 0;
var swipeLeft = 0;
var swipePage = 0;
function swipe1(event, direction, distance, duration, fingerCount) {
if (direction == "left") {
swipeLeft++;
if (swipeLeft == 5) {
swipeLeft = 0;
}
}
if (direction == "right") {
swipeRight++;
if (swipeRight == 5) {
swipeRight = 0;
}
}
swipePage = swipeLeft - swipeRight;
if (swipePage == 0) {
$("html, body").animate({
scrollLeft: 0,
}, 1500);
swipeLeft = 0;
swipeRight = 0;
}
if (swipePage == 1) {
$("html, body").animate({
scrollLeft: $("#hwwPage").offset().left
}, 1500);
}
if (swipePage == 2) {
$("html, body").animate({
scrollLeft: $("#projPage").offset().left
}, 1500);
}
if (swipePage == 3) {
$("html, body").animate({
scrollLeft: $("#digiPage").offset().left
}, 1500);
}
if (swipePage == 4) {
$("html, body").animate({
scrollLeft: $("#contPage").offset().left
}, 1500);
}
console.log(swipeRight + "+" + swipeLeft);
console.log(swipePage);
}
I have fixed your code: you don't really need swipeleft and swiperight i think. Just increase or decrease the swipePage value depending on the swipe direction:
var swipePage = 0;
function swipe1(event, direction, distance, duration, fingerCount) {
if (direction == "left")
if (swipePage > 0)
swipePage++;
if (direction == "right")
if (swipePage < 4)
swipePage--;
var pageIds = ["",
"#hwwPage",
"#projPage",
"#digiPage",
"#contPage"
];
$("html, body").animate({
scrollLeft: $(pageIds[swipePage]).offset().left
}, 1500);
}

How to make the scrolling script efficiently?

I have div element inside that I have a list of(ol) elements. I use drag and drop using jquery nestable. Please look at the issue here (How to scroll the window automatically when mouse moves bottom of the page using jquery).
I used to get the visible <li> in current view, using view-port(plugin - http://www.appelsiini.net/projects/viewport).
I used the below script. I couldn't scroll the page more efficient and
script doesn't work in FF (scrolling does not work).
if ($('.dd-dragel').length > 0) {
var totalVisibleLi = $('#ol_id li:visible').length;
var liInViewPort = $('#ol_id li:in-viewport').length;
var closestLi = $(this.placeEl).prev('li');
var items = $('#ol_id li:in-viewport');
var indexOfClosestLi = items.index(closestLi);
if (indexOfClosestLi >= (liInViewPort - 3) && (e.pageY < $('#div_id').height())) {
$('body').animate({
scrollTop: $(window).scrollTop() + 200
}, 1);
}
if (indexOfClosestLi <= 3) {
$('body').animate({
scrollTop: $(window).scrollTop() - 200
}, 1);
}
}
What am I missing here?
Edited your code. Now scroll also work in FF
if ($('.dd-dragel').length > 0) {
var totalVisibleLi = $('#ol_id li:visible').length;
var liInViewPort = $('#ol_id li:in-viewport').length;
var closestLi = $(this.placeEl).prev('li');
var items = $('#ol_id li:in-viewport');
var indexOfClosestLi = items.index(closestLi);
if (indexOfClosestLi >= (liInViewPort - 3) && (e.pageY < $('#div_id').height())) {
$('html,body').animate({
scrollTop: $(window).scrollTop() + 200
}, 400);
}
if (indexOfClosestLi <= 3) {
$('html,body').animate({
scrollTop: $(window).scrollTop() - 200
}, 400);
}
}

How to scroll the window automatically when mouse moves bottom of the page using jquery

I have 50 divs,But in my window it shows only 25,I do drag and drop activity on these divs.So If i drag my first div near 25th div,It should scroll automatically to show the remaining divs.How do i do this in jquery? any idea?
I am using Nestable not draggable()
This will need some fine tuning depending on your specific use case but it seems to work fairly well.
Working Example
$('.dd').nestable({ /* config options */
});
$(window).mousemove(function (e) {
var x = $(window).innerHeight() - 50,
y = $(window).scrollTop() + 50;
if ($('.dd-dragel').offset().top > x) {
//Down
$('html, body').animate({
scrollTop: 300 // adjust number of px to scroll down
}, 600);
}
if ($('.dd-dragel').offset().top < y) {
//Up
$('html, body').animate({
scrollTop: 0
}, 600);
} else {
$('html, body').animate({
});
}
});
Related API documentation:
.mousemove()
.innerHeight()
.scrollTop()
.offset()
.animate()
If you want to know bottom of window you can check
$(window).height()
and $(window).scrollTop();
I know this is an old topic but since this feature keeps in standby, I just improved apaul34208's code, hope it helps
$(window).mousemove(function (e) {
if ($('.dd-dragel') && $('.dd-dragel').length > 0 && !$('html, body').is(':animated')) {
var bottom = $(window).height() - 50,
top = 50;
if (e.clientY > bottom && ($(window).scrollTop() + $(window).height() < $(document).height() - 100)) {
$('html, body').animate({
scrollTop: $(window).scrollTop() + 300
}, 600);
}
else if (e.clientY < top && $(window).scrollTop() > 0) {
$('html, body').animate({
scrollTop: $(window).scrollTop() - 300
}, 600);
} else {
$('html, body').finish();
}
}
});
A bit of an improvement on Mencey's code. A caveat it might have is that it's based on an interval fired every 16 milliseconds instead of mousemove(). I don't know how taxing this may be, so feel free to increase the number of milliseconds or fire a clearInterval at some point. The benefit from this is the scrolling is continuous, instead of having to wiggle the mouse as 1j01 pointed out.
You may also change the speed and zone variables, zone being an area in pixels at the top and the bottom of the window where you can drag the item. As you get closer to the top or the bottom of the window, the scrolling speed goes up as it compares the distance between the position of the mouse and the actual edge of the window, giving some control to the user on the scrolling speed.
var mouseY;
var speed = 0.15;
var zone = 50;
$(document).mousemove(function(e){
mouseY = e.pageY - $(window).scrollTop();
}).mouseover();
var dragInterval = setInterval(function(){
if ($('.dd-dragel') && $('.dd-dragel').length > 0 && !$('html, body').is(':animated')) {
var bottom = $(window).height() - zone;
if (mouseY > bottom && ($(window).scrollTop() + $(window).height() < $(document).height() - zone)) {
$('html, body').animate({scrollTop: $(window).scrollTop() + ((mouseY + zone - $(window).height()) * speed)},0);
}
else if (mouseY < zone && $(window).scrollTop() > 0) {
$('html, body').animate({scrollTop: $(window).scrollTop() + ( (mouseY - zone) * speed) },0);
} else {
$('html, body').finish();
}
}
},16);

Categories