im working on my new portfolio and im having a problem that i cant fix without help.
Here you have a link of my website so far: www.jsfiddle.net/Cessum/pmaefrjo/
What i want is that when you click on creaties the website scrolls too far. To explain it better you have to click on creaties and then remove the white menu bar with inspect element.
After you have done that you can see that there is red color under (behind) the menu bar. That is the problem i want to fix. It should stop scrolling before the red gets behind the white menu bar.
Can you help me fix this? Thanks!
To remove the height you can do this http://jsfiddle.net/pmaefrjo/1/
$('html,body').animate({
scrollTop: target.offset().top - 50 // the height of #MenuBar
}, 1000);
OR
$('html,body').animate({
scrollTop: target.offset().top - $('#MenuBar').height()
}, 1000);
Related
I've got a WordPress menu item with Javascript successfully attached, and I'm trying to make it scroll to the bottom of the page when clicked on. The scrolling itself worked fine, but I found that the page would jump up to the top for a fraction of a second before scrolling down to the bottom. That code looked like this:
$("#menu-item-135").click(function() {
$('html, body').animate({ scrollTop: $(document).height() - $(window).height()}, 500);
});
I googled around for a solution, and ended up with this
$("#menu-item-135").click(function() {
$('html, body').animate({ scrollTop: $(document).height() - $(window).height()}, 500);
return false;
});
All I did was add 'return false;'. That solved the jumping to the top problem, but now the page jumps to the bottom before scrolling instead! Does anyone have any other ideas for what I might try?
window.scrollTo(0, 0);
you need to try this.
I've already created the #scrolldownbutton to scroll to the first component but what I'm initially trying to do is when the button is clicked the page scrolls within the viewport and stops on the partially visible component at the bottom of the view port in which the button should appear at the the top of the visible component and the bottom of the viewport each time the button is clicked.
Here is what I have so far Please if anyone could help this would be amazing.
$(document).ready(function() {
$("#scrollmorebutton").on("click", function() {
console.log("scrollmorebutton was clicked");
//jquery smooth scroll code here
$('html, body').animate({
scrollTop: $("h2:contains('New Programs')").offset().top
}, 2000);
});
});
Might not be anything near what you're asking for as i'm not entirely sure I understand. But here's a fiddle with some example code
https://jsfiddle.net/cf3q2zo9/
I need scroll my page when my user click in a button
I'm using the following code
$('#content').animate({
scrollTop: $("#divTicketMedioGrupoProdutos").offset().top
}, 'slow');
But, with this code, my page scroll until the div is found and get the top propertie, and I need that this div reach a specific .offset().top, i.e. scroll a little bit more until reach my fixed navbar.
How can I make this using scrollTop ?
Grupo Produto - Ticket Médio is the title of the $("#divTicketMedioGrupoProdutos"), look that right now is so close of my navbar because I scroll the page. I want this when my user click in a button.
UPDATE
Look at the image below, when I click on the green bar in the chart, generate a new graph;
And in the image below, with the code
$('#content').animate({
scrollTop: $("#divTicketMedioGrupoProdutos").offset().top
}, 'slow');
you can see that the page scrolls but the new div are in the middle of the page because didn't scroll so much (with the code)
What about adding additional pixels to your .offset().top() call?
$('#content').animate({
scrollTop: $("#divTicketMedioGrupoProdutos").offset().top() + 70
}, 'slow');
How to smoothly scroll a div to top of the page but just below the header.
I have the code in jquery but I need to convert this to pure java-script and should be working in all the latest browsers.
$('html, body').animate({ scrollTop: $("#mydiv"+id).offset().top - 55 }, 699);
I got the java script function to scroll but not the animation.
document.getElementById('mydiv'+id).scrollIntoView(); scrollBy(0, -55);
Can someone help me here , I need to add a small animation to the scroll. Thanks.
I'm trying to a create a vertically smooth scrolling website, using jQuery. I am using this JavaScript and this tutorial Smooth Scrolling Website to create the site.
But I'm having trouble with a fixed header, the scrolling works fine but it appears half way down the relevant div because the div is aligning to the top of the page, not just below the fixed header as I would like it too.
I've tried adding an offset to scrollTop but all hell breaks loose on the page, things appearing above the fixed header etc. Just a page mash-up really. If anybody could shed any light it would be greatly appreciated.
$(function() {
$('ul.menu a').bind('click',function(event){
var $anchor = $(this);
$('html, body').stop().animate({
scrollTop: $($anchor.attr('href')).offset().top
}, 1500,'easeInOutExpo');
/*
if you don't want to use the easing effects:
$('html, body').stop().animate({
scrollTop: $($anchor.attr('href')).offset().top
}, 1000);
*/
event.preventDefault();
});
});
I've found this code on StackOverflow (+ $('.fixedheader').outerHeight()) and added it to my code (after scrollTop: $($anchor.attr('href')).offset().top) it does work but seems to have the opposite effect. Anybody know why?
I've solved this,
+ $('.fixedheader').outerHeight()
Should be
- $('.fixedheader').outerHeight()
So silly of me, cheers anyway guys.