I a doing a webpage with a template but when i do scroll i receive a url with #[object%20Object].
When I press the li element, the page scrolls to the services section as expected however, the url is appended with /#[object Object] instead of /inscripcion.
This is code in index.html:
<ul class="nav">
<li class="scroll-to-section">Inscripciones</li>
<li class="scroll-to-section">Recorridos</li>
<li class="scroll-to-section">Reglamento</li>
<li class="scroll-to-section">Contacto</li>
<li class="scroll-to-section"></li>
</ul>
<!-- ***** Code to scroll ***** -->
<section class="section" id="inscripcion">
And this is code un custom.js:
$(document).ready(function () {
$(document).on("scroll", onScroll);
//smoothscroll
$('.scroll-to-section a[href^="#"]').on('click', function (e) {
e.preventDefault();
$(document).off("scroll");
$('a').each(function () {
$(this).removeClass('active');
})
$(this).addClass('active');
var target = this.hash,
menu = target;
var target = $(this.hash);
console.log(target);
$('html, body').stop().animate({
scrollTop: (target.offset().top) + 1
}, 500, 'swing', function () {
window.location.hash = target;
console.log(window.location.hash);
$(document).on("scroll", onScroll);
});
});
});
function onScroll(event){
var scrollPos = $(document).scrollTop();
$('.nav a').each(function () {
var currLink = $(this);
var refElement = $(currLink.attr("href"));
if (refElement.position().top <= scrollPos && refElement.position().top + refElement.height() > scrollPos) {
$('.nav ul li a').removeClass("active");
currLink.addClass("active");
}
else{
currLink.removeClass("active");
}
});
}
Related
I have a mainpage called index.html with a menu linking to certain positions (parts) on this mainpage. This is done via the variable 'data-slide' (see below) that is behind the 'buttons' in the menu. This works well on the mainpage. However, how can I do this when I'm on another html page than the mainpage, jumping to a certain position (part) of the mainpage?
<div id="nav" class="right">
<ul class="navigation">
<li data-slide="1">Home</li>
<li data-slide="2">Products</li>
<li data-slide="4">Trade fairs</li>
<li data-slide="6">Company</li>
<li data-slide="8">Careers</li>
<li data-slide="10">Contact</li>
<li class="clear"></li>
</ul>
</div>
Javascript:
var links = $('.navigation').find('li');
slide = $('.slide');
button = $('.button');
mywindow = $(window);
htmlbody = $('html,body');
slide.waypoint(function (event, direction) {
dataslide = $(this).attr('data-slide');
if (direction === 'down') {
$('.navigation li[data-slide="' + dataslide + '"]').addClass('active').prev().removeClass('active');
$('.navigation li[data-slide="1"]').removeClass('active');
}
else {
$('.navigation li[data-slide="' + dataslide + '"]').addClass('active').next().removeClass('active');
}
});
mywindow.scroll(function () {
if (mywindow.scrollTop() == 0) {
$('.navigation li[data-slide="1"]').addClass('active');
$('.navigation li[data-slide="2"]').removeClass('active');
}
});
function goToByScroll(dataslide) {
var goal = $('.slide[data-slide="' + dataslide + '"]').offset().top;
if (mywindow.scrollTop()<goal) {
var goalPx = goal + 1;
} else {
var goalPx = goal - 1;
}
htmlbody.animate({
scrollTop: goalPx
}, 2500, 'easeInOutQuint');
}
links.click(function (e) {
e.preventDefault();
dataslide = $(this).attr('data-slide');
goToByScroll(dataslide);
});
button.click(function (e) {
e.preventDefault();
dataslide = $(this).attr('data-slide');
goToByScroll(dataslide);
});
window.setTimeout(function(){
if(window.location.hash){
var $target = $(window.location.hash).closest("#bgaboutbody");
if($target.length)
$('html, body').animate({scrollTop: $target.offset().top}, 1000);
}
}, 100);
Please try this link:-anchor linking to a certain position of the page
I've got a fixed top navigation and im trying to get the links to change to active when scrolling down the page. Currently i've got it working to a point where if you click it will add an active class and go to the correct position. When you scroll up or down it should change to the previous/next section in the nav which i cant get working. any ideas?
Thanks
html:
<body id="page-top">
<nav id="mainNav" class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<img src="img/nav-logo.png" id="company-logo-large">
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right" id="mainmenu">
<li>
<a class="page-scroll" href="#about">About</a>
</li>
<li>
<a class="page-scroll" href="#services">Services</a>
</li>
<li>
<a class="page-scroll" href="#team">Team</a>
</li>
</ul>
</div>
</div>
</nav>
section where nav scrolls to:
<section id="about"></section>
<section id="services"></section>
<section id="team"></section>
javascript:
$(document).ready(function () {
$(document).on("scroll", onScroll);
//smoothscroll
$('a[href^="#"]').on('click', function (e) {
e.preventDefault();
$(document).off("scroll");
$('a').each(function () {
$(this).removeClass('active');
})
$(this).addClass('active');
var target = this.hash,
menu = target;
$target = $(target);
$('html, body').stop().animate({
'scrollTop': $target.offset().top+2
}, 500, 'swing', function () {
window.location.hash = target;
$(document).on("scroll", onScroll);
});
});
});
function onScroll(event){
var scrollPos = $(document).scrollTop();
$('#mainNav a').each(function () {
var currLink = $(this);
var refElement = $(currLink.attr("href"));
if (refElement.position().top <= scrollPos && refElement.position().top + refElement.height() > scrollPos) {
$('#mainNav li a').removeClass("active");
currLink.addClass("active");
}
else{
currLink.removeClass("active");
}
});
}
Any help would be appreciated.
I think already answered this. check Highlight active menu item on scroll
and this jsfiddle:
// JavaScript Document
// Can also be used with $(document).ready() / $(window).load()
$(document).ready(function(){
$('body').css('display', 'none');
$('body').fadeIn(500);
// An offset to push the content down from the top
var listElement = $('#primary-navwrapper li');
var offset = $('#header').outerHeight();
listElement.find('a[href^="#"]').click(function(event) {
// Prevent from default action to intitiate
event.preventDefault();
// The id of the section we want to go to.
var anchorId = $(this).attr("href");
// Our scroll target : the top position of the
// section that has the id referenced by our href.
if (anchorId.length > 1 && $(anchorId).length > 0)
{
var target = $(anchorId).offset().top - offset;
}
else
{
var target = 0;
}
//console.log(target);
$('html, body').animate({ scrollTop: target }, 500, function () {
//window.location.hash = '!' + id;
window.location.hash = anchorId;
});
setActiveListElements();
});
// Update current item class
function setActiveListElements(event){
var windowPos = $(window).scrollTop();
$('#primary-navwrapper li a[href^="#"]').each(function() {
var currentLink = $(this);
if ($(currentLink.attr("href")).length > 0)
{
var refElement = $(currentLink.attr("href"));
if (refElement.position().top <= windowPos && (refElement.position().top + refElement.height() + $("#primary-navwrapper").height() ) > windowPos) {
$('#primary-navwrapper li a').removeClass("current");
currentLink.addClass("current");
}
else{
currentLink.removeClass("current");
}
}
});
}
// Update menu item on scroll
$(window).scroll(function() {
// Call function
setActiveListElements();
});
$('.backtotop').click(function () {
$('html, body').animate({ scrollTop: 0}, 1250);
return false;
});
});
We use some jQuery to make our navigation sticky from some point on the page and to add an active class to sections on the page. Currently the active class is added to the a class inside the li. But I want to add this to the li instead of the a href.
How can I achieve this?
Code:
<script>
$j(window).scroll(function(){
var sticky = $j('.menu-header-product'),
scroll = $j(window).scrollTop();
var elementOffset=jQuery("#productnav").offset();
if (scroll >= elementOffset.top - 57) sticky.addClass('sticky');
else sticky.removeClass('sticky');
});
$j(window).scroll(function(){
var sticky = $j('.content'),
scroll = $j(window).scrollTop();
var elementOffset=jQuery("#productnav").offset();
if (scroll >= elementOffset.top - 57) sticky.addClass('sticky');
else sticky.removeClass('sticky');
});
$j(document).ready(function () {
$j(document).on("scroll", onScroll);
$j('a[href^="#"]').on('click', function (e) {
e.preventDefault();
$j(document).off("scroll");
$j('li').each(function () {
$j(this).parent().removeClass('active');
})
$j(this).parent().addClass('active');
var target = this.hash;
$jtarget = $j(target);
$j('html, body').stop().animate({
'scrollTop': $jtarget.offset().top - 120 /**just subtract the height of the fixed html part */
}, 500, 'swing', function () {
window.location.hash = target;
$j(document).on("scroll", onScroll);
});
});
});
function onScroll(event){
var scrollPosition = $j(document).scrollTop();
$j('nav li').each(function () {
var currentLink = $j(this);
var refElement = $j(currentLink.attr("href"));
if (refElement.position().top - 125 <= scrollPosition && refElement.position().top - 125 + refElement.height() > scrollPosition) {
$j('nav ul li a').parent().removeClass("active");
currentLink.parent().addClass("active");
}
else{
currentLink.parent().removeClass("active");
}
});
}
</script>
You can use jQuery's parent selector. So
$j(this).addClass('active');
becomes
$j(this).parent().addClass('active');
You would also need to change the selector $j('a') to $j('li'). I would recommend filtering to only lis in your navigation, i.e. $j('nav li'). Finally, you'd have to update the onScroll event similarly.
Sorry for my bad English but i've a question with a problem.
Here is the message I've :
Uncaught TypeError: Cannot read property 'top' of undefined
Here is my function :
function onScroll(event){
var scrollPos = $(document).scrollTop();
$('#menu-center a').each(function () {
var currLink = $(this);
var refElement = $(currLink.attr("href"));
if (refElement.position().top<= scrollPos && refElement.position().top + refElement.heig
ht() > scrollPos) {
$('#menu-center ul li a').removeClass("active");
currLink.addClass("active");
}
else{
currLink.removeClass("active");
}
});
}
I don't understand because I've an other page in local with this function and it's works fine.
I've search on the web but nothing correspond to my problem.
Thanks for your help
change this line: var refElement = $(currLink.attr("href"));
in this line: var refElement = $(currLink).attr("href");
I found out the solution for the above issue. See the following code snippet
jQuery(document).ready(function($) {
$(document).on("scroll", onScroll);
});
function onScroll(event){
var scrollPos = $(document).scrollTop();
$('#menu-center a').each(function () {
var currLink = $(this);
var refElement = currLink.attr("href");
var splitEle = refElement.split('#');
if ($("#"+splitEle[1]).offset().top <= scrollPos && $("#"+splitEle[1]).offset().top + $("#"+splitEle[1]).height() > scrollPos) {
$('#menu-center ul li').removeClass("active");
currLink.parent().addClass("active");
}else{
currLink.parent().removeClass("active");
}
});
}
Let's say we've got this HTML:
<div class="locationhash" data-position="0"></div>
<div class="locationhash" data-position="1000"></div>
<div class="locationhash" data-position="3000"></div>
<div class="locationhash" data-position="5000"></div>
<div class="locationhash" data-position="8000"></div>
where data-positions value, in normal conditions would equal to elements height from pages top in px.
Im retrieving elements with .locationhash, reading its data-position and pushing both values as an object into an array using this code. (works as intended, output in third code sample here)
var getSections = function() {
var pageSectionsArr = [];
var pageSections = (document).querySelectorAll('.locationhash');
Array.prototype.forEach.call(pageSections, function(section) {
var getSectionPos = section.getAttribute('data-position');
var pageSectionObj = {
pageSection : section,
pageSectionPos : getSectionPos
};
pageSectionsArr.push(pageSectionObj);
});
console.log(pageSectionsArr)
};
(function recalcSectionPos() {
$(window).resize(function() {
getSections();
});
})();
Output looks like this:
[ {div.locationhash, value of its data-position},
{div.locationhash, value of its data-position}, ... ]
Now i need to check on scroll wether current window.scrollTop() equals any of data-position values so:
$(window).scroll(function() {
var hFromTop = $(window).scrollTop()
//cant figure out what should i do next (jquery allowed)
});
Question: How could i check current window.scrolltop() against multiple values, while user is scrolling so i could make something happen when window.scroll top equals to a value
(I'm using this array because later im gonna read .locationhash's id in order to append it to url using location replace)
DEMO
$(document).ready(function () {
$(document).on("scroll", onScroll);
//smoothscroll
$('a[href^="#"]').on('click', function (e) {
e.preventDefault();
$(document).off("scroll");
$('a').each(function () {
$(this).removeClass('active');
})
$(this).addClass('active');
var target = this.hash,
menu = target;
$target = $(target);
$('html, body').stop().animate({
'scrollTop': $target.offset().top+2
}, 500, 'swing', function () {
window.location.hash = target;
$(document).on("scroll", onScroll);
});
});
});
function onScroll(event){
var scrollPos = $(document).scrollTop();
$('#menu-center a').each(function () {
var currLink = $(this);
var refElement = $(currLink.attr("href"));
if (refElement.position().top <= scrollPos && refElement.position().top + refElement.height() > scrollPos) {
$('#menu-center ul li a').removeClass("active");
currLink.addClass("active");
}
else{
currLink.removeClass("active");
}
});
}
I followed #tushar gupta's advice, also wrapped it in a function checking wether scrolling ended
$(window).scroll(function() {
clearTimeout($.data(this, 'scrollTimer'));
$.data(this, 'scrollTimer', setTimeout(function() {
var hFromTop = $(window).scrollTop();
$.each(pageSectionsArr, function(obj) {
console.log(this + 'is sparta')
if (~~this.pageSectionPos <= hFromTop && ~~this.pageSectionPos + this.pageSection.offsetHeight > hFromTop) {
//console.log(this.pageSectionPos)
var sectionsId = this.pageSection.id
//console.log(sectionsId)
window.location.replace('#/'+sectionsId)
};
});
}, 250));
});