Why won't this Javascript scroll function work? - javascript

I am mightily confused to why this won't run. I am trying to get the click to scroll button to scroll down.
https://jsfiddle.net/n9jqvas9/
<script>
$("button").click(function() {
$('html,body').animate({
scrollTop: $("s2text").offset().top},
'slow');
});
</script>

You are missing both jQuery (in your example) and a dot before s2text because it is a class.
$("#button").click(function() {
$('html,body').animate({
scrollTop: $(".s2text").offset().top},
'slow');
});
Here is your updated jsfiddle.

You need to add JQuery library and set the class selector:
$(".s2text").offset().top
Intead:
$("s2text").offset().top
Working example.

You are missing the dot (.) class name.
$("button").click(function() {
$('html,body').animate({
scrollTop: $(".s2text").offset().top},
'slow');
});

Related

Make Auto and Manual ScrollTop() works without conflicts

I'm doing scrolltop when the document is ready, that's work, but I'm giving the same script to a div to make the scroll manual. The problem is, if I use the auto-scroll, the manual scroll doesn't work.
Manual scroll
$("#flecha-inscripciones").click(function() {
$('html, body').animate({
scrollTop: $("#formInscripciones").offset().top
}, 2000);
});
With:
<div id="flecha-inscripciones"><img src="https://residenciarucab.es/img/arrow-down.png" alt="Baja para ver" title="Baja para ver"></div>
Autoscroll:
$( document ).ready(function() {
$('html, body').delay(5000).animate({
scrollTop: $("#formInscripciones").offset().top
}, 1100);
});
You can see example here.
It only works the auto-scroll because the manual scroll has conflict.
Solved with queue: false; after the code.
Put below code at end of your, but before that include jquery.js file
$.noConflict();
jQuery(document).ready(function($){
$("#flecha-inscripciones").click(function() {
$('html, body').animate({
scrollTop: $("#formInscripciones").offset().top
}, 2000);
});
$('html, body').delay(5000).animate({
scrollTop: $("#formInscripciones").offset().top
}, 1100);
});

Jquery Smooth Scroll not working, Tried almost everything

Here's some bit of the code, I wrote -
$('#go').on('click', function(e){
e.preventDefault()
var href = $('#go').attr('href');
console.log(href)
$('html, body').animate({
scrollTop: $(href).offset().top
}, )
})
I'm not sure why this is happening, would appreciate your help!!!
Well, if you're using a css framework like Material Design lite, then you need to use something different.
$('#go').on('click', function(e){
e.preventDefault()
var href = $('#go').attr('href');
console.log(href)
$('.mdl-layout__content').animate({
scrollTop: $(href).offset().top
},1000 )
})
Wrap it into ".mdl-layout__content", instead of "html, body" as it fixes it. I had the same problem, but that fixed it :)
Add some time value in animate function like animate((),1000) .They will give smooth effect .see the jquery documentation of animate()
$('#go').on('click', function(e){
e.preventDefault()
var href = $('#go').attr('href');
console.log(href)
$('html, body').animate({
scrollTop: $(href).offset().top
},1000 )
})
2 things you need to look at
writing HTML correctly .the link must have href with # inside it, in your case <a id="go" href="#goTo">GOOO</a>
check if your id's are correctly written in html and then in JQ
$('#go').on('click', function(e){
e.preventDefault()
var href = $('#go').attr('href');
$('html, body').animate({
scrollTop: $(href).offset().top
}, 1000)
})
div {
margin-top:100vh;
height:100px;
background:red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a id="go" href="#goTo">GOOO</a>
<div id="goTo">
</div>

scroll to elements up and down in jquery

i want to do scroll to an element as whatsapp search
when user clicked search (here it is bottom) should scroll to last element
ie; element with id chat-7.
and when click up button should scroll to chat-6 then chat-5 ..and so on.
if click down button it should scroll to down if it is not last item.
function scroll(id){
console.log(id);
$(".container").animate(
{
scrollTop: $("#"+id).offset().top
},
"fast"
);
}
full code here
http://jsfiddle.net/p3kar5bb/231/
unfortunately this code is not working properly
Because your div .container doesn't have scroll bar so you can do two things.
1. Animate Body
$("body").animate({ scrollTop: $("#"+id).parent('.item').offset().top}, "fast");
Demo
2. Set max-height to div
.container{
height: 100%;
overflow-y: scroll;
max-height:200px;
}
Demo
Perform the animate on the body instead of the .container
function scroll(id){
console.log(id);
$("body").animate({ scrollTop: $("#"+id).offset().top}, "fast");
}
Also set the
var pointedPosition=0;
Fiddle http://jsfiddle.net/p3kar5bb/234/
$('html, body').animate({
scrollTop: $("#"+id).offset().top
}, 500);
Code that is given in http://jsfiddle.net/p3kar5bb/231/ is fine, just change the animate() as above.
Just tried – $('html') does not work in Chrome and $('body') does not work in Firefox, so $('html, body') is needed. And also calling .stop() is a good thing.
Assuming you have the element id from buttons click event , try to change the scroll function code to this:
function scroll(id){
$('html, body').animate({
scrollTop: $("#"+id).offset().top
}, 2000);
}
And I have update your code here http://jsfiddle.net/p3kar5bb/231/.

scrollTo a div once a button is clicked?

I'm trying to get the page to scroll to #news .section-wrap when .paging-navigation a is clicked. I tried inserting the line (as seen below) but couldn't get it to work. Where am I going wrong?
$('#article-list').on('click', '.paging-navigation a', function(e){
e.preventDefault();
var link = $(this).attr('href');
$('#article-list').scrollTo('#news .section-wrap'); // this is the line I added
$('#article-list').fadeOut(500, function(){
$(this).load(link + ' #article-list', function() {
$(this).find('#article-list > *').unwrap().end().fadeIn(500);
});
});
});
You will need to animate html and body and point to the selector within the jQuery animate function. Try this:
$('html, body').animate({
scrollTop: $('#news .section-wrap').offset().top
}, 2000);
Try something like this:
$(".paging-navigation a").click(function(){
$('html, body').animate({
scrollTop: $("#news .section-wrap").offset().top
}, 500);
});
You might need to alter something in this code, either timing or some bug since i could not test it currently.
Hope it is helpful.
scrollTo() is not a native jQuery method. You can use a third part plugin like http://lions-mark.com/jquery/scrollTo/ or http://demos.flesler.com/jquery/scrollTo/ .
As answered on jQuery scroll to element you can also make the page scroll to the target position, like this:
$("#button").click(function() {
$('html, body').animate({
scrollTop: $("#elementtoScrollToID").offset().top
}, 2000);
});

ScrollTop to element - 20px

I'm trying to make a scrollTop to my div element, but not exactly where it is. I want
to go 20px before my div element. I think i can explain better showing my code for you:
HTML:
<div id="arrow-down">Click here and go to content!</div>
<div id="content">The content is here!</div>
JQuery:
I already have a code that is working fine, but i want to make it diference.
$(document).ready(function() {
$('#arrow-down').click(function() {
$('html, body').animate({
scrollTop: $("#content").offset().top
}, 800);
});
});
This code takes me to the div#content, but i want to go 20px from the top of this!
Something like that:
$(document).ready(function() {
$('#arrow-down').click(function() {
$('html, body').animate({
scrollTop: $("#content" - 20px).offset().top
}, 800);
});
});
Well, i dont know if its look confused... I hope u guys can help me!
You can do this:
$('html, body').animate({
scrollTop: $("#content").offset().top - 20
}, 800);
$(document).ready(function() {
$('#arrow-down').click(function() {
$('body').animate({
scrollTop: $("#content").offset().top-20
}, 800);
});
});
try this

Categories