I'm trying to implement some JavaScript code I found here on stackoverflow to make a smooth transition between one link on a page and other section in other page using the standar:
<a href="example.html#anchor">
The issues is that when the user clik the link, 1 second white flash appears before the smooth scroolling makes. I dont like this behavior for the "User Experience"
How can I to prevent this?
The JavaScript:
(function($){
var jump=function(e)
{
if (e){
e.preventDefault();
var target = $(this).attr("href");
}else{
var target = location.hash;
}
$('html,body').animate(
{
scrollTop: $(target).offset().top
},1000, function()
{
location.hash = target;
});
}
$('html, body').hide()
$(document).ready(function()
{
$('a[href^=#]').bind("click", jump);
if (location.hash){
setTimeout(function(){
$('html, body').scrollTop(0).show()
jump()
}, 0);
}else{
$('html, body').show()
}
});
})(jQuery)
Thanks.
Related
I am using the following code to smooth scroll between links and it works perfectly.
I currently have an offset of 93px but wish to make this smaller, if not remove on small devices. I am wondering if its possible to change the offset value for smaller resolutions.
var jump=function(e)
{
if (e){
e.preventDefault();
var target = $(this).attr("href");
}else{
var target = location.hash;
}
$('html,body').animate(
{
scrollTop: $(target).offset().top-93
},2000,function()
{
location.hash = target;
});
}
$('html, body').hide();
$(document).ready(function()
{
$('a[href^=#]').bind("click", jump);
if (location.hash){
setTimeout(function(){
$('html, body').scrollTop(0).show();
jump();
}, 0);
}else{
$('html, body').show();
}
});
You can use JQuery $( window ).height() method to get the current window height and detect small devices. Based on this value you can display your offset differently.
More info here : https://api.jquery.com/height/
friends,
I'm building single page website, which uses the jQuery function to scroll to an anchor, when the menu link is being selected. Here is the code I use:
(function($) {
var jump = function(e)
{
if (e) {
e.preventDefault();
var target = $(this).attr("href");
} else {
var target = location.hash;
}
$('html,body').animate(
{
scrollTop: $(target).offset().top - 150
}, 1500, 'swing', function()
{
location.hash = target - 150;
});
}
$('html, body').hide()
$(document).ready(function()
{
$('a[href^=#]').bind("click", jump);
if (location.hash) {
setTimeout(function() {
$('html, body').scrollTop(0).show()
jump()
}, 0);
} else {
$('html, body').show()
}
});
})(jQuery)
Now this function is called for all html 'a' elements with 'href'. I need to modify the function above, so it would work for all defined links except this one with the anchor #nav-menu:
<span></span>
Any suggestions would be very appreciated.
Jquery provide a set of built-in filters that you can use in your case you may use:
the built in filter not() as following:-
$("a[href^=#]:not([href=#nav-menu])").click(jump);
build you own business filter as following:-
$("a[href^=#]").filter(function() {
//you may here do whatever filteration business you want
return $(this).attr("href")!='#nav-menu';
}).click(jump);
Simple Example Here
I have a link and an element on the same page:
Click
<div id="#about-us"></div>
And the following javascript:
var scrollto = window.location.hash;
if (window.location.hash != null && window.location.hash != '') {
$('html, body').animate({
scrollTop: $(scrollto).offset().top
}, 500);
}
This should animate a scroll to #about-us element,but it doesn't , it goes straight to element without animation,probably because the hash condition is not met,though there is a hash in url,because the hash is changed after the function.
I need a way to auto scroll to that element with animation,when you click the link . As example,if this page is index.php , and you want to go from another-page.php to index.php , straight to that element, it should load the page,and then scroll to the element,same if you are on index.php but at the top of the page and you click on the link,it should scroll down to the element.
The only problem is when you are on the same page.It doesn't pass the condition,so the animation doesn't work.
UPDATE I've changed the code a little bit.Now the condition is meet,but the animation doesn't work..
$('#link').click(function(e) {
window.location.href='index.php#about-us';
var scrollto = window.location.hash;
if (window.location.hash != null && window.location.hash != '') {
alert(scrollto);
$('html, body').animate({
scrollTop: $(scrollto).offset().top
}, 500);
}
});
This is because window.location.hash is not defined by the time you click on the link and the event handler is called.
Try using:
jQuery(function($) {
$('#link').on('click', function(e) {
e.preventDefault();
var scrollTo = $(this).attr('href'); // retrieve the hash using .attr()
if (scrollTo != null && scrollTo != '') {
$('html, body').animate({
scrollTop: $(scrollTo).offset().top
}, 500);
}
});
});
Also, change your HTML code with:
<div id="about-us"></div> <!-- no need for prepending id value with # -->
See this working JSFiddle
If you want to bind the event on page load, use:
$(document).on('load', function(e) { /* the codez */ });
And retrieve the location hash with var scrollTo = window.location.hash; that will be defined when the page loads.
This code works for me
HTML for same page scroll
Click for About us
<div id="about-us"></div>
HTML for external page link
Click for product introduction
HTML for external page scroll
<div id="introduction"></div>
jQuery
if(window.location.hash){
var getUrlAfterHash = window.location.hash;
if($(getUrlAfterHash).length > 0){
$('html, body').animate({ scrollTop : 0 });
scrollToTop();
}
}
$('.link').on('click', function(e){
e.preventDefault();
var getUrlAfterHash = $(this).attr('href');
scrollToTop();
});
function scrollToTop(){
var idPositionHeight = $(getUrlAfterHash).offset();
$('html, body').animate({ scrollTop : idPositionHeight.top}, 800);
}
I've got this code here:
$(document).ready(function()
{
$("#nav_items > p:first-child").click(function()
{
$('html,body').animate(
{
scrollTop: $('#main_div').offset().top
}, 500);
});
$("#nav_items > p:last-child").click(function()
{
$('html,body').animate(
{
scrollTop: $('#about_us').offset().top
}, 800);
});
});
On element(p) click it scrolls the document to a #main_div or #about_us element. How can I stop it from keep on scrolling if I for example start scrolling with my mouse wheel?
You can listen to the mousewheel event and use the stop method:
$(window).on('mousewheel', function() {
$('body, html').stop();
});
Here is a method, combining the use of $(window).scroll() and $('body').on('mousewheel'), that will demonstrate how to do what you wish:
jsFiddle Demo
var scrollPause = 0;
menuItems.click(function(e){
var href = $(this).attr("href"),
offsetTop = href === "#" ? 0 : $(href).offset().top-topMenuHeight+1;
scrollPause = 1;
$('html, body').stop().animate({
scrollTop: offsetTop
}, 300, function(){
setTimeout(function(){
scrollPause = 0;
},5000);
});
e.preventDefault();
});
$('body').on({
'mousewheel': function(e) {
if (scrollPause == 0) return;
e.preventDefault();
e.stopPropagation();
}
})
Notes:
In the jsFiddle, the sp div is used to visually show status of the scrollPause variable
Upon clicking a top menu item, the scrollPause is set to 0 (disallow scroll) and a setTimeout is used to re-enable it after an 8-second pause. Therefore, immediately after the scroll-to-element, mouse wheel scroll will be disabled for 8 seconds.
So, I'm quite new to javascript and building a site where I'm trying to have animated scrolls on the page.
To enable animated scroll to a link I'm using this code:
jQuery(document).ready(function ($) {
$('a[href^="#"]').on('click',function (e) {
e.preventDefault();
var target = this.hash,
$target = $(target);
$('html, body').stop().animate({
'scrollTop': $target.offset().top
}, 900, 'swing', function () {
window.location.hash = target;
});
});
})();
To scroll to the top of the page I am using this code.
//<-- scroll top -->
var $top = jQuery.noConflict();
$top("#scroll-top").hide();
// fade in #scroll-top
$top(window).scroll(function () {
if ($top(this).scrollTop() > 150) {
$top('#scroll-top').fadeIn();
} else {
$top('#scroll-top').fadeOut();
}
});
// scroll body to 0px on click
$top('#scroll-top a').click(function () {
$top('body,html').animate({
scrollTop: 0
}, 800);
return false;
});
They both work fine independently, but not together.
Can anybody help me find out why they conflict, and how to solve the conflict?
So, this is how I fixed my issue:
I removed the conflicting code " // scroll body to 0px on click " and instead use the animated scroll to anchor link to animate both functions, with a placed on top of the page as well.
jQuery(document).ready(function ($) {
$('a[href^="#"]').on('click',function (e) {
e.preventDefault();
var target = this.hash,
$target = $(target);
$('html, body').stop().animate({
'scrollTop': $target.offset().top
}, 900, 'swing', function () {
window.location.hash = target;
});
});
})();
I works fine, but I am missing only one feature, that the javascript recognises internal links that start with anything else than #. Right now it doesn't recognise for example this link http://julebord.bedriftsdesign.no/julebord.html#julemeny. It only works if I use this: #julemeny