I made the scroll to top and scroll to bottom in jquery. In that i make to scroll as with percentage. For example:
If the scroll from top to bottom is 50% then it scroll from top to bottom as 50% it already works. But now i want to scroll the 50% if i again click then it scroll the remaining 50% to the bottom of the page. I am not sure how to do this in jquery.
Here is the fiddle Any suggestion would be great.
http://jsfiddle.net/TkYpY/
Thanks,
vicky
$('#spnTop').on("click", function () {
var percentageToScroll = 50;
var percentage = percentageToScroll / 100;
var height = $(document).height() - $(window).height();
if(scrollAmount > 0 )
{
scrollAmount = scrollAmount - (height * percentage);
}
console.log('scrollAmount: ' + scrollAmount);
$('html,body').animate({
scrollTop: scrollAmount
}, 'slow', function () {
console.log("reached top");
});
});
var scrollAmount = 0;
$('#spnbottom').on("click", function () {
var percentageToScroll = 50;
var percentage = percentageToScroll / 100;
var height = $(document).height() - $(window).height();
if( scrollAmount < height)
{
scrollAmount = scrollAmount + height * percentage;
}
console.log('scrollAmount: ' + scrollAmount);
jQuery("html, body").animate({
scrollTop: scrollAmount
}, 900);
});
It does not scroll on the second click as you have already reached the scrollAmount.
If you want to scroll further then declare var scrollAmount outside the function and when you click again on the bottom link, calculate the next scroll Amount with max being your document height and add it to the global scrollAmount declared var.
$('#spnTop').on("click", function () {
var percentageToScroll = 80;
var percentage = percentageToScroll / 100;
var height = $(document).scrollTop();
var scrollAmount = height * (1 - percentage);
console.log('scrollAmount: ' + scrollAmount);
$('html,body').animate({
scrollTop: scrollAmount
}, 'slow', function () {
console.log("reached top");
});
});
var scrollAmount = 0;
$('#spnbottom').on("click", function () {
var percentageToScroll = 50;
var percentage = percentageToScroll / 100;
var height = $(document).height() - $(window).height();
scrollAmount = scrollAmount + height * percentage;
console.log('scrollAmount: ' + scrollAmount);
jQuery("html, body").animate({
scrollTop: scrollAmount
}, 900);
});
I modified your fiddle a bit. Seems to me some calculation problem. Here is your fiddle .
Is this what you needed?
First declare a global variable height with default value.
In top scroll code, replace
var height = $(document).scrollTop();
with
height -= $(document).height() - $(window).height();
and in bottom scroll replace this var height = $(document).height() - $(window).height(); with height += $(document).height() - $(window).height(); .
Related
var totalHeight = 0;
$(".scroll-section").each(function(){
totalHeight += $(this).height();
});
$(".site-content").scroll(function() {
var scrollTop = $(".site-content").scrollTop();
var movePos = (scrollTop / totalHeight) * 100;
movePos = movePos + 100;
console.log(movePos);
$(".page-fixed").css("background-size", `${movePos}% 100%`)
});
I tried margin, does not work
Doing this for webflow so yeah... Would need to get it webflow compatible as well
I have problem with my parallax slideshow script. It's not scrolling smooth and its shaking weird. The thing is that I couldn't find the proper script for element(like slider etc), most of them are only for single image. There is my script:
<script type="text/javascript">
var ypos,image;
function parallex () {
ypos = window.pageYOffset;
image = document.getElementById('slider');
image.style.top = ypos * .8 +'px';
}
window.addEventListener('scroll',parallex);
link to the site: http://www.pappu-lighting.com/Slider/Home.html
$(window).scroll(function(){
if($(document).scrollTop() > 600 && $(document).scrollTop() < 2500){
var temp = 100 - ($(document).scrollTop() - 1200) / 8;
var bonus = '50% ' + temp*-1 + '%';
document.getElementById('div').style.backgroundPosition = bonus;
}
}
I am not an advanced coder and I am struggling with making these two overflow boxes move the div lines left and right, I tried with using this existing code: http://jsfiddle.net/pWUDJ/275/
$(window).scroll(function() {
$("div#mydiv").css({
"right": $(window).scrollTop() + "px"
}).text("hello:"+$(window).scrollTop());
});
My code Is — http://jsfiddle.net/millington/6v1fc7bj/
$(window).scroll(function() {
$("div#l2").css({
"right": $("#leftscr").scrollTop() + "px"
}).text("left&right:"+$("#leftscr").scrollTop());
});
Please Help If you can ! :D
Try this :
$(window).scroll(function() {
var div_offset = $("#leftscr").offset().top;
var window_scroll = $(window).scrollTop();
var scroll = (1- (div_offset - window_scroll)/div_offset) * 100;
if(scroll < 100) {
$("div#l2").css({
"left": scroll + "%"
}).text("left&right:"+scroll + "%");
}
});
http://jsfiddle.net/6v1fc7bj/1/
if required in px
$(window).scroll(function() {
var div_offset = $("#leftscr").offset().top;
var window_scroll = $(window).scrollTop();
if(window_scroll < div_offset) {
$("div#l2").css({
"left": window_scroll + "px"
}).text("left&right:"+window_scroll + "px");
}
});
http://jsfiddle.net/6v1fc7bj/2/
I am a little confused on how to keep some variables Ive created uptodate when the window is resized so my scroll function carries on getting the correct values. Basically I have multiple elements that contain a message that gets displayed when the user scrolls the element into 50% height of the viewport height. This works fine but my issue is when I resize I'm not sure how to update my variables boxHeight, elementOffset, verticalMatch which keep control of the values I need to use in my scroll event. I was wondering can someone help explain how I can resolve this?
My code looks like this
var windowHeight = $(window).height(),
headerHeight = $('.header').height();
$('.box').each(function (i,e) {
var el = $(e);
var boxHeight = el.height(),
elementOffset = el.offset().top,
verticalMatch = (windowHeight / 2) + (headerHeight / 2) - (boxHeight / 2);
$(window).on('scroll', function () {
var scrollTop = $(window).scrollTop(),
distance = elementOffset - scrollTop;
if( distance <= verticalMatch ) {
el.addClass('is-active');
}
});
});
$(window).on('resize', function() {
windowHeight = $(window).height()
elementOffset = $('.box').offset().top;
$('.box').each(function (i,e) {
var el = $(e);
//update boxHeight, elementOffset, verticalMatch
verticalMatch = (windowHeight / 2) + (headerHeight / 2) - (boxHeight / 2);
});
});
And heres the JS Fiddle: http://jsfiddle.net/fm4z7/2/
If someone could explain how I do this it would be great!
If all you want to do is update your sizing variables during a resize event, then do just that:
$(window).on('resize', function() {
windowHeight = $(window).height();
elementOffset = $('.box').offset().top;
});
Your variables are global so they can be accessed anywhere.
I need calculate and set the height for some div (initial settings). When the height of the browser window is changed --> change the height for div.
How will be better to rewrite this code (I want do initial settings once and change it when window resize):
$(document).ready(function () {
var height = document.documentElement.clientHeight - 500;
if (height < 135) {
height = 135;
}
document.getElementById('left_space').style.height = height + 'px';
$(window).resize(function () {
var height = document.documentElement.clientHeight - 500;
if (height < 135)
{
height = 135;
}
document.getElementById('left_space').style.height = height + 'px';
});
});
If you are purely looking to tidy up the code, it could look something like this:
$(document).ready(function () {
var resizeIt = function() {
var height = Math.max(document.documentElement.clientHeight - 500, 135);
$('#left_space').css('height', height + 'px');
};
resizeIt();
$(window).resize(function () {
resizeIt();
});
});
Here I have pulled out the lines of code that set the height into their own function, so the code is not duplicated. Then I took advantage of some of the shorter syntax you can use in jQuery for finding and changing styles of elements.
is that what you are looking for?
api.jquery.com
jQuery(document).ready(function () {
$(window).resize(function() {
var height = document.documentElement.clientHeight - 500;
if (height < 135) {
height = 135;
}
document.getElementById('left_space').style.height = height + 'px';
jQuery(window).resize(function () {
var height = document.documentElement.clientHeight - 500;
if (height < 135)
{
height = 135;
}
document.getElementById('left_space').style.height = height + 'px';
});
});
});
I think jQuery(window).resize one would be good