I need the smooth scroll to be offset by 100px. So far I have this:
$(function() {
$('a.page-scroll').bind('click', function(event) {
var $anchor = $(this);
$('html, body').stop().animate({
scrollTop: $($anchor.attr('href')).offset().top
}, 1500, 'easeInOutExpo');
event.preventDefault();
});
});
This gets my link moving! But how can I add .offset().top > 100 to this? I am having issues figuring it out if anyone can help out.
Sounds like you have a fixed navbar. Assuming your anchors are empty:
<a class="anchor" id="foo"></a>
Just offset the anchors in css:
.anchor {
top: -100px;
position: relative;
display: block;
}
Alternatively you can offset the scrollTop by updating your javascript:
scrollTop: $($anchor.attr('href')).offset().top - 100
ve1jdramas Hi there.
Have a look at this link here.
In this example, they use + or - .
Like this...
scrollTop: target.offset().top -100
or
scrollTop: target.offset().top +100
Try this and see if you can get this to work for you.
Or use this full code.
$(function() {
$('a[href*=#]:not([href=#])').click(function() {
if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
if (target.length) {
$('html,body').animate({
scrollTop: target.offset().top -100
}, 1000);
return false;
}
}
});
});
Related
I want to find data in HTML with tag search input, when it is clicked to "find" it will scroll to where the data is placed.
$(function() {
$('#searchBar').on('click', function(){
if(searchBar.value == '.profiles'){
var target = $('.profiles');
target = target.length ? target : $('[name = reynaldo' + this.hash.slice(1) + ']');
if (target.length) {
$('html, body').animate({
scrollTop: target.offset().top
}, 1000);
return false;
}
}
});
});
That's the code I tried, please help me
When scrolling down the page on a desktop - The navbar fixes to the top of the page but it doesn't seem to animate. How can i add a animation/transition effect so that it moves naturally when scrolling?
Code Example: http://codepen.io/gza/pen/ygjpBy
$('a[href*="#"]:not([href="#slide"])').click(function() {
if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
if (target.length) {
$('html, body').animate({
scrollTop: target.offset().top - 100
}, 1000);
return false;
}
}
});
});
Link to jsfiddle - https://jsfiddle.net/dn5t2mwm/3/
$('a.item_link').click(function(){
var hash = this.hash, top = $(hash).offset().top;
console.log(hash, top);
$('html, body').animate({
scrollTop: top
}, 500);
return false;
});
I want to make smooth scroll. But when i account coordinates of link with anchor it returns different results. It looks like it accounts coordinates from the start of viewport - not a start of document. It works on codepen, but doesn't work on local and jsfiddle. css is disabled. Maybe you know what is wrong with it?
Use this piece of code:
$('a[href*="#"]:not([href="#"])').click(function() {
if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
if (target.length) {
$('html, body').animate({
scrollTop: target.offset().top
}, 1000);
return false;
}
}
});
I'm using the the JavaScript code below to create a scroll effect from my nav to the anchor.
The problem I am having is I want the scrolling to stop 100px above the anchor.
What would I need to change in this code to achieve this result?
$(document).ready(function() {
$('a[href^="#"]').click(function() {
var target = $(this.hash);
if (target.length == 0) target = $('a[name="' + this.hash.substr(1) + '"]');
if (target.length == 0) target = $('html');
$('html, body').animate({ scrollTop: target.offset().top }, 1000);
return false;
});
});
Thank you
Subtract 100 pixels from target.offset().top. like so:
$(document).ready(function() {
$('a[href^="#"]').click(function() {
var target = $(this.hash);
if (target.length == 0) target = $('a[name="' + this.hash.substr(1) + '"]');
if (target.length == 0) target = $('html');
$('html, body').animate({ scrollTop: target.offset().top-100 }, 1000);
return false;
});
});
Everything is working as it should, however the URL does not change when the jQuery is in place. Is there anyway to have it smooth scroll and change the url at the same time? I tried a different method before this however it wasn't as cross browser compatible as this.
My HTML is:
<li class="representing-you-online">Representing you online</li>
<li class="developing-your-people">Developing your people</li>
My jQuery is:
$(document).ready(function() {
$('a[href^="#"]').click(function() {
var target = $(this.hash);
if (target.length == 0) target = $('a[name="' + this.hash.substr(1) + '"]');
if (target.length == 0) target = $('html');
$('html, body').animate({ scrollTop: target.offset().top }, 500);
return false;
});
});
$(document).ready(function(){
$('#logo a').click(function () {
$('body,html').animate({
scrollTop: 0
}, 800);
return false;
});
});
Thanks!
Replace the click handling code for your anchors like this:
$(document).ready(function() {
$('a[href^="#"]').click(function() {
var target = $(this.hash);
var hash = this.hash;
if (target.length == 0) target = $('a[name="' + this.hash.substr(1) + '"]');
if (target.length == 0) target = $('html');
$('html, body').animate({ scrollTop: target.offset().top }, 500, function (){
location.hash = hash;
});
return false;
});
});
Please note the complete function in the end of the jquery .animate(). It changes the URL.
See the demo here.