scroll(0,0) working while scrollTo(0,0) not working? - javascript

Ehy guys. I have a strange kind of problem. I've created a button to scroll the page to the bottom when the user clicks it, and it works only if I use scroll(0,0), while if I use scrollTo(0,0) (which should work in the same way I guess) doesn't work (the page doesn't scroll, nothing happens). Here is a part of code: this is the function which should scroll to the top after click using scrollTo but which doesn't do anything.
<button id="scrollaInAlto" onClick="scrollInAlto();"
style="background-color:Transparent;border:none;display:none;"></button>
<script>
function scrollInAlto() {
window.scrollTo(0,0); <-- this one doesn't work
//window.scroll(0,0); <-- this one works
}
</script>
The only other thing I have is a small script to show and hide the button which scrolls the page: here it is.
<script>
$(document).ready(function(){
$(window).scroll(function(){
var $temp = $("#scrollaInAlto").scrollTop();
if (document.body.scrollTop > 50) {
$("#scrollaInAlto").show();
} else {
$("#scrollaInAlto").hide();
}
});
});
</script>
Why doesn't scrollTo work properly?

Related

JS/JQUERY: on(scroll) interfering with on(click)

So, in the script of my website, I have functions:
$(window).on('scroll', function(){
// some code
});
$('.subnav_single_box').on('click', function(){
$('#h1').animate({ right : '300%'}, 1000);
// some more code -shall refer to this block of code later
});
The problem is that some_more_code, inside on(click) works, but the #h1-code works only sometimes.
If I do not scroll before clicking the .subnav_single_box, then everything works just as I want it to, but if I scroll before clicking, then "some more code" works, but not #h1-code.
How do I fix this?

Not Working - Header Slide up on scroll down page, and down again on scroll up - jquery

I have the following jQuery where I am attempting to hide the header on scroll down and appear on scroll up, but I cannot get it to work? All content that will be slideUp etc... is in a header tag
$(document).ready( function () {
$(window).scroll(function() {
var currentScrollTop = $(this).scrollTop();
if (currentScrollTop > 80){
$('header').slideUp(200);}
else {
$('header').slideDown(200);}
});
});
I can get the header to disappear with the following code but really struggling to make it functional
$(document).ready( function () {
$('body').scroll(function() {
$('header').slideUp(200);
});
});
Where am I going wrong? Thanks in advance
I don't get really what is the effect you want to achieve but what you are probably having wrong is the use of window as a referential for .scroll() instead of the use of document.
So try instead to use $(document).scroll(function(){...}); as I've tried in this jsFiddle.

Javascript Changing Css Elements

I was following this tutorial, trying to get my sites navigation bar to stick to the top of the page when it reaches the top of the page. I couldn't get it to work with the way they had it set up, so I tried to set it up in a different way and still can't get it to work. I put this code at the end of my body tag to try and make this work (the navigation bar has a css id of "navbar"):
jQuery
if ($document).scrolltop() > 132){
$("#navbar").css("position", "fixed");
$("#navbar").css("top", "132px");
}
else{
$("navbar").css("position","static");
}
Is there something I am missing?
Thanks in advance,
Bradon
Edit:
I want to thank everyone for the quick replies, and apologize as I am both new to javascript and stackoverflow. I have tried to implement some of the solutions suggested and here is what I have now:
<script type="text/javascript">
var navbar = $("#navbar");
navbar.on("scroll", function(e){
if (navbar.scrollTop() <= 0){
navbar.css("position", "fixed");
navbar.css("top", "0px");
}
else{
navbar.css("position","static");
}
});
</script>
I still can't get it to work properly.
Edit 2:
I would like to thank everybody for their help, I couldn't have figured it out without you guys. Here is the code I used if anybody should ever need it:
<script type="text/javascript">
var navbar = jQuery("#navbar");
jQuery(document).on("scroll", function(e){
if (jQuery(document).scrollTop() > 280){
navbar.css("position", "fixed");
navbar.css("top", "0px");
}
else{
navbar.css("position","static");
navbar.css("top", "auto");
}
});
</script>
this script assumes the thing you want stuck to the top has a class of "navbar". My problem was that wordpress wasn't accepting $ in jquery so I replaced it with jQuery. Thank-you once again everybody!
There is a bigger issue in that your scrolltop check is happening only once, while the page is loading. In the original tutorial, the code that checks the scrolltop is set to execute everytime a scroll event occurs:
wrap = $('#wrap');
wrap.on("scroll", function(e) {
if (this.scrollTop > 147) {
wrap.addClass("fix-search");
} else {
wrap.removeClass("fix-search");
}
});
The "wrap.on('scroll')" part is very critical because this will cause the "scrolltop" value check to be triggered whenever the div is scrolled.
I believe the syntax is wrong. Missing parenthesis on document.scrollTop and also missing the # sign on navbar.
<script type="text/javascript">
if ( $(document).scrollTop() > 132){
$("#navbar").css("position", "fixed");
$("#navbar").css("top", "132px");
}
else{
$("#navbar").css("position","static");
}
</script>

Infinite scroll return multiple results in IE

I created a simple infinite scrolling for my website which shows more images when scrolling at the bottom. It works great with Chrome but when I test it on Internet Explorer the loader shows results multiple times. I don't know where is the error.
Here is my jQuery code:
$(document).ready(function(e){
$(document).scroll(function(){
if($(window).scrollTop() + $(window).height() == $(document).height()){
var pictureCount = $(".Picture-1A").length;
$.get('ajax/home-pagination.php', {off_set:pictureCount}, function(data){
$("#homeContent").append(data);
});
}
});
});
I send the off_set to the php page which will return the data with the new pictures and append it to the end of the page
this should work:
first implement the cdn of debounce to your page
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-throttle-debounce/1.1/jquery.ba-throttle-debounce.min.js"></script>
then
in your scroll function, add the debounce function like this:
$(window).scroll($.debounce(100, function(){ /* function */ }));
Hope this works for you too. :)

bootstrap scrollspy bug when resizing browser

Hello Stackoverflow bootstrappers!
I don't see that this question has been asked before, and I am really interested to see the outcome.
How to duplicate the bug:
Open the page: (my current url testing this bug) http://dnwebdev.com/dev/
Resize the page down to a tablet
Use the navbar
(notice that the url has changed to include #section) this only occurs if you resize the browser. This causes the spying/scrolling to be off.
NOTE: if you open it on a mobile device the problem does not occur so a client won't face it, it was just bugging me.
Thank you, looking forward to your responses.
Edit: When clicking on the title brand the url adds #section-1 without the need to resize, which is also throwing me off. At this point I am thinking it is a bootstrap thing.
The only Javascript I have on my page is the following:
function close_toggle()
{
if ($(window).width() <= 768)
{
$('.nav a').on('click', function() {
$(".navbar-toggle").click();
});
}
else
{
$('.nav a').off('click');
}
}
close_toggle();
$(window).resize(close_toggle);
The code above closes the toggle after a selection is made in mobile.
if ($(window).width() <= 768)
{
var offset = 75;
}
else
{
var offset = 90;
}
$('.navbar li a').click(function(event) {
event.preventDefault();
$($(this).attr('href'))[0].scrollIntoView();
scrollBy(0, -offset);
});
The code above (based on screensize) will offset the scrollspy
Edit #2
The only reason I need any offset is due to fixed-top which causes scrollspy to freak out.
Help is much appreciated.
Fixed-top seems to carry the bug with scroll spy leaving me no choice but to use javascript.
To handle navigation correct highlighting, you have to consider, that all the calculations made by scrollSpy are being performed when scrollTop value is equal to zero.
So the solution looks like this:
var refreshScrollSpy = function (element, navElement, offset) {
// cache current scroll position to come back after refreshing
var cacheScrolltop = $(element).scrollTop();
$(element)
.scrollTop(0)
.scrollspy(‘refresh’)
.scrollTop(cacheScrolltop);
};

Categories

Resources