I am creating a onepage design. Now I work with a fixed header menu with links that are linked to there sections. I have get some code for get a smooth look.
Problem
When I click a menu item, it will go to the correct section, but the section will be on top of the browser screen. Now I want to add a offset of 120px top. How can I do this?
CODE:
// When you click on an <a> that has a '#'
$('nav#primary-navwrapper a[href^="#"]').bind('click.smoothscroll',function (e) {
// Prevent from default action to intitiate
e.preventDefault();
// Targets the part of the address that comes after the '#'
var target = this.hash;
$target = $(target);
$('html, body').stop().animate({
// The .offset() method allows us to retrieve the current position of an element relative to the document.
// Here we are using it to find the position of the target, which we defined earlier as the section of the address that will come after the '#'
'scrollTop': $target.offset().top
}, 500, 'swing', function () {
window.location.hash = target;
});
});
Thank you.
Casper
Try:
'scrollTop': $target.offset().top + 120
Related
I'm currently trying to get my navigation bar (fixed at the top of the screen) to work better. Currently, if you press on a link within the nav bar, it will go to a certain section with this code:
$('a[href^="#"]').bind('click.smoothscroll',function (e) {
e.preventDefault();
var target = this.hash,
$target = $(target);
$('html, body').animate({
'scrollTop': $target.offset().top - 45
}, 400, 'swing', function () {
window.location.hash = target;
});
});
});
However, it will go to that section but then shift down on the screen and cover content. But if I press the same section again, it will go to the correct spot. I need it to go to the correct spot on the first click.
When I take out the "- 35" part within animate(), it doesn't shift down and goes smoothly, but I need the "- 35" part to offset the nav bar or else it will cover content every time. What is causing this jumping/shifting? Any advice or information that would be helpful? Thanks!
Note: I also have this code, but I'm not sure if it's part of the issue:
$(document).ready(function(){
var offset = $(".navbar").offset().top;
$(window).scroll(function() {
if ($(window).scrollTop() >= offset) {
$('.navbar').addClass('navbar-fixed');
}
});
UPDATE: I fixed my issue by reading more into the details of jQuery's animate. The parameter "complete" (a function to call once the animation is complete, called once per matched element) that I was using was not necessary, so I removed it from my code.
You need to avoid setting the hash after the animation is completed. As you use an offset for the animation (the -45) the animation will run smoothly to the given coordinates, and then it will jump to the hash position when you set the location.hash (after the animation is completed). The solution is to remove the hash from the location (the preventDefault() does that), and don’t set it again after animation is completed.
$('a[href^="#"]').bind('click.smoothscroll',function (e) {
e.preventDefault();
var target = this.hash,
$target = $(target);
$('html, body').animate({
'scrollTop': $target.offset().top - 45
}, 400, 'swing');
});
I have a list of items. When I click on one item (project) it opens (this is ok) and it scrolls to the top of the page (the wrong top!). The problem occurs when I have an opened item and I decide to open the one below: the top position is increased by the opened project height and the second project I click goes too far over the top.
Following the FIDDLE below: if I open project1 and then I click on project2, this goes on the wrong top. Same if I try to open any project below another opened one.
JS
$('.accordion-section-title').on('click', function () {
var idName = $(this).attr('id');
$('html, body').animate({
scrollTop: $("#" + idName).offset().top
}, 500);
});
Here's the FIDDLE
The problem seems to be the .slideUp() and .slideDown() methods are animated at the same time the window is scrolling. By the time the window has scrolled to the right Y coordinate, the accordion sections' heights have been altered, thus causing the window to end up in the wrong position.
I'm sure there are other ways to accomplish correct scroll positions, but my first thought was to store the initial Y positions once the page is loaded. This can be done this way:
$('.accordion-section-title').each(function() {
$(this).data('ypos', $(this).offset().top)
})
Each .accordion-section-title element will have its Y position stored in a data attribute called ypos. Later when you scroll the window, don't scroll to the elements position, but rather to its stored initial position. In other words, change scrollTop: $("#" + idName).offset().top to scrollTop: $("#" + idName).data('ypos'). Put together with your code it will look like the following:
$('.accordion-section-title').on('click', function(e) {
var idName = $(this).attr('id');
$('html, body').animate({
scrollTop: $("#" + idName).data('ypos') - 10
}, 500);
});
You can see how it plays out in this fiddle
Sorry for the title, wasn't sure how to word this.
I have a nav menu at the top of my page. Clicking on each link will scroll to the targeted element. It also appends #sectionname to the URL. Everything works great in Chrome. The problem I'm having is that the menu itself is static, so when I initiate the scroll I'm offsetting the menu height. Again, works great in Chrome, but in IE and FF it scrolls to where I want it then immediately jumps back to the top of the element minus the offset.
Here is the code:
$('.nav').on('click', function (e) {
e.preventDefault();
var target = $(this).data('target');
$('html, body').stop().animate({
scrollTop: $(target).offset().top - 77 //should actually be 78 (height of the header, but IE has a 1px discrepancy.
}, 800, 'swing', function () {
window.location.hash = target; //causes IE and FF to jump back to the original top without the header offset.
});
});
How can I keep IE and FF from immediately processing the new URL? Or is there a better way to do this?
You can use history.replaceState() to modify address string see history.replaceState() example?
history.replaceState({}, target.slice(1), target);
I'm implemented a pure css parallax effect in my website. Next step was to implement the scrollTop functionality the site is a one page layout.
$(document).ready(function($) {
$('a[href^="#"]').bind('click.smoothscroll',function (e) {
e.preventDefault();
var target = this.hash,
$target = $(target);
$('#container').animate({
scrollTop: $target.offset().top
}, 2000);
});
});
With this I get a strange behavior:
initial start, click on anchor -> it scroll to the div
click on another anchor -> it does what it does not what it should
here the jsFiddle for you: https://jsfiddle.net/5pwctshp/2/
after some research could it be the overflow property that trigger the bug/problem?
Thank's in advance
I've been putting together a personal project. I'm relatively new to Java so picking it up as I go along.
Basically I have created a site which has sections I want accessible along both the x and y axis.
I have made these sections accessible using anchor links, so the site does link to these div's.
I have also managed to set up the Vertical smooth scroll animation. So my page can auto scroll up and down seamlessly using the following code:
$(document).ready(function(){
$('a[href^="#"]').on('click',function (e) {
e.preventDefault();
var target = this.hash;
var $target = $(target);
$('html, body').stop().animate({
'scrollTop': $target.offset().top
}, 900, 'swing', function () {
window.location.hash = target;
});
});
});
However I can't seem to get the same scroll affect to apply for the div's located left/ right. what I want to happen is if I click a link which should go to a Div located to the left or right (off screen) it does a similar seamless smooth scroll left or right while keeping the same up/down animation.
Basically I want to apply both vertical and Horizontal smooth scrolling on the same page.
What changes or additions do I need to make to apply this?
I managed to implament horizontal scrolling on my site by making some tweaks to the above code.
$(document).ready(function(){
$('a[href^="#"]').on('click',function (e) {
e.preventDefault();
var target = this.hash;
var $target = $(target);
$('html, body').stop().animate({
'scrollLeft': $target.offset().left
}, 900, 'swing', function () {
window.location.hash = target;
});
});
});
This seems to work with horizontal scrolling. Now I need to make these work together at the same time...
I've added both to a seperate file and referenced them in my HTML. However now only the horizontal works. Anyway to make both work at the same time?
I managed to find an answer for this in the end and will post it up for future reference and aid.
Basically when I say I want to use both vertical and horizontal auto scroll I'm not talking about auto scrolling diagonally. I simply mean I have multiple links on a single page. Some which should auto scroll to a different section along the Y axis and some which auto scroll along the X axis.
So to do this I created 2 Js files with the following code and referenced them in my html. I also defined a class on all my links to specify which js file should be associated. e.g. 'up' was for my up/down auto scroll;
Vertical Scroll:
$(document).ready(function(){
$('a.up').on('click',function (e) {
e.preventDefault();
var target = this.hash;
var $target = $(target);
$('html, body').stop().animate({
'scrollTop': $target.offset().top
}, 3000, 'swing', function () {
window.location.hash = target;
});
});
});
Horizontal scroll:
$(document).ready(function(){
$('a.left').on('click',function (e) {
e.preventDefault();
var target = this.hash;
var $target = $(target);
$('html, body').stop().animate({
'scrollLeft': $target.offset().left
}, 3000, 'swing', function () {
window.location.hash = target;
});
});
});
HTML for assigning a class to a link;
<a class="up" href="#tutorial">Link</a>
Class referenced in js file as shown above;
$('a.up').on('click',function (e)
The problem I was having is as follows. The vertical and horizontal codes conflicted. Both of them used;
$('a[href^="#"]').on('click'
Which meant when a link was clicked it performed the action. There was nothing to distinguish which direction the action should go when the link was triggered.
by changing this to;
$('a.up').on('click'
and introducing classes to my links I could specify which links should trigger which JS file and work as expected.
I hope this helps anyone with a similar problem or just looking for some aid with auto scrolling.
Feel free to ask questions. :)