Scroll to page depending on button that is clicked - javascript

Can anyone explain to me how I can use the jquery scroll-to to make the buttons on the yellow menu scroll to their corresponding sections (i.e distribution to the pink block)
This is my code: http://jsfiddle.net/VXkW5/5/
I think its something like this:
$(".nav").click(function () {
$('html, body').animate({
scrollTop: $(".section").offset().top + $(".section").height()
}, 500);
});
But I dont know how to relate it to it's relevant section based on the link that was clicked.

Working Demo
First of all, ID need to be unique in the page. I see both as well as uses same ID
so i have made change & Just add the corresponding div id to the href tag, it will take to that particular div on click
posting
distribution
applicantions
In terms of jQuery:
$(".nav").click(function (e) {
e.preventDefault();
var divId = $(this).attr('href');
$('html, body').animate({
scrollTop: $(divId).offset().top;
}, 500);
});

You could have a link like
Click to jump to section 1
And a section like
<div id="section1">
<p>Section 1 content</p>
</div>
And handle the scroll to like so
<script type="text/javascript">
$(".nav").click(function (event) {
event.stopPropagation();
var theHref = $(this).attr('href');
$('html, body').animate({
scrollTop: $(theHref).offset().top + $(".section").height()
}, 500);
});
</script>

Related

jQuery Links have to be clicked twice to scroll

I have a few links on my sidebar on my website. The links have the class sidebarelement. Everytime I click one of them I have to click twice to scroll to my content. After the first time nothing happens. I use jQuery.
$(".sidebarelement").on("click", function () {
var offset = $(':target').offset();
if (offset) {
var scrollto = offset.top - 158; // minus fixed header height
$('html, body').animate({scrollTop: scrollto});
}
});
How can I fix this?
For everyone else who had this problem I got a solution.
The idea is to get the href attribute from the link which has been clicked and animate (scroll) to that place. Also note that e.preventDefault() prevents the link to jump to his place.
Here is my code snippet.
$(document).ready(function () {
$('.sidebarelement').on("click", function () {
var href = $(this).attr('href');
$('html, body').animate({
scrollTop: $(href).offset().top - document.getElementById('navDiv').clientHeight // minus fixed header height
}, 'slow');
e.preventDefault();
});
});

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>

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: Smooth scroll to ID interferes with back to top

I'm a jQuery novice. I have two functions on the same page:
one which is a smooth scroll to an ID
the other which shows a "back to top" element after the user scrolls a set distance.
The functions work on their own, but when I combine them as shown below, the "back to top" function doesn't work.
I think I'm missing something obvious and could use some help.
Thanks!
Update: This fiddle shows the problem:
back to top jsfiddle
If the smooth scroll block is disabled, the back to top function works.
jQuery(document).ready(function(){
//smooth scrolling
$('a[href^="#"]').on('click',function (e) {
e.preventDefault();
var target = this.hash,
$target = $(target);
$('html, body').stop().animate({
'scrollTop': $target.offset().top -150}, 900, 'swing', function () {
window.location.hash = target;});
});
// Show or hide the back to top footer button
$(window).scroll(function() {
if ($(this).scrollTop() > 200) {
$('.go-top').fadeIn(200);
} else {
$('.go-top').fadeOut(200);
}
});
// Animate the scroll to top
$('.go-top').click(function(event) {
event.preventDefault();
$('html, body').animate({scrollTop: 0}, 900);
});
});
Hi #DavidCara Just add
<div id="top"></div>
after immediate <body> tag it'll defiantly work.
See updated jsfiddle Here
Use this simple code in html tags directly.
<a onclick="$('html, body').animate({scrollTop: 0}, 900);" href="javascript:;">back to top </a>

On click buttons Scroll Div top of the window With increase height

In Demo 01 You can see the Div is Scrolling top of the page with increase height. And I need the same animation with click Buttons, like in Demo 02.
$('.work-showcase').click(function(){
$('.work-showcase').animate({height:'135px'}, 500);
$(this).animate({height:'400px'}, 500,function() {
$("html, body").animate({ scrollTop: $(this).offset().top });
});
});
Not sure if I understand what you want, but see if this Javascript works for you:
var map = {
"slice1": "#post1",
"slice2": "#post2",
"slice3": "#post3",
}
$('.clickable').click(function(){
var postId = map[$(this).attr('id')];
$('.post').animate({height:'50px'}, 500);
$(postId).animate({height:'400px'}, 500,function() {
$("html, body").animate({ scrollTop: $(postId).offset().top });
});
});
See demo at http://jsfiddle.net/xCKPW/1/.
What I think you want to do is have the animation and size change that you currently have get triggered when a button is clicked.
I also suspect you want the action to occur when the image is clicked.
In this case, move the animations into a separate function, and call that function onclick.
Here's your jsfiddle updated with buttons.
http://jsfiddle.net/Jq4Vw/132/
$('.work-showcase, button').click(function(){
moveAndResize($(this).index());
});
function moveAndResize(index){
var item = $('.work-showcase:eq('+index+')');
$('.work-showcase').animate({height:'135px'}, 500);
$(item).animate({height:'400px'}, 500,function() {
$("html, body").animate({ scrollTop: $(item).offset().top });
});
}
This works as long as the indexes are the same. If you want the index of the buttons to be different, add an id tag or something else that you can then pass to the moveAndResize which maps to the index of the item you want to change.

Categories