I have a problem with a website.
I am new in javascript.
I need to do that when I click on a menu item (wordpress) and then whe window is loaded, automaticaly scroll down to the content(empty) div.
My javascript code not working. What should I do?
My code:
<script>
$(".menu-item").click(function() {
$( window ).load(function() {
$('html, body').animate({ scrollTop: $('.content').offset().top }, 'slow');
});
});
</script>
The two codes working with alone, but in this version not working.
I do not know what you exactly want, but first you need to call window.onload and then append click event.
Like this:
<script>
$( window ).load(function() {
$(".menu-item").click(function() {
$('html, body').animate({ scrollTop: $('.content').offset().top }, 'slow');
});
});
</script>
Related
I am using javascript for smooth scrolling (in script tags below) and also have href for anchor links. All of the anchors are working fine but the javascript appears to be disabling the href for the URL. Can you help me rewrite this so that works as well?
<ul class="snip1143">
<li class>Home</li>
<li>About</li>
<li>Work</li>
<li>Blog </li
<li>Contact</li>
<script>
$(document).on('click', 'a', function(event) {
event.preventDefault();
$('html, body').animate({
scrollTop: $( $.attr(this, 'href') ).offset().top
}, 500);
});
</script>
event.preventDefault() is going to prevent the default, which for anchors is going to that url. You probably want to add a class to the anchors that you want to animate and select only those instead of preventing default on all anchor tags.
Acutally since you have unique data-hover for each element, all we have to do then is filter it by validating the value of their data-hover attribute.
<script>
$(document).on('click', 'a', function(event) {
if($(this).data('hover') !== "Blog"){
$('html, body').animate({
scrollTop: $( $.attr(this, 'href') ).offset().top
}, 500);
}// since i noticed that you want to redirect the page once the Blog link is clicked
});
</script>
Let me know if this helps you with your problem.
I am using the following script to smooth scroll to anchor points on my web page. The problem I am having is that I have a couple href links to different pages but this seems to be blocking them from opening. Can only open them by right clicking 'open new tab'.
Any help much appreciated. Thanks.
$(document).on('click', 'a', function(event){
event.preventDefault();
$('html, body').animate({
scrollTop: $( $.attr(this, 'href') ).offset().top
}, 500);
});
Managed to fix this by removing event.preventDefault()
I'm currently trying to make a navigational menu that on click scrolls to a div positioned lower on the page. Initially it worked but as I added a CSS transition to highlight the text, the jQuery will no longer trigger the scrolling to happen upon clicking it.
$("#about, #about:hover").click(function() {
$('html,body').animate({
scrollTop: $("#box1").offset().top},
'slow');
});
The #about id is a part of the nav menu and will scroll to #box1 on click. I've tried adding the hover state to the selector, changing it to .trigger rather than .click but I'm not seeing a simple solution. I've recreated the event in Chrome, Safari, and using JSFiddle.
Is the JQuery conflicting with the transition, the hover state, or my code in general?
EDIT: It is working in the Fiddle example but the event still isn't happening when produced locally (everything is linked and correct with no errors in console).
Your JS code runs before the DOM is fully loaded.
Put the JS inside document.ready();:
$(document).ready(function () {
$("#about, #about:hover").click(function () {
$('html,body').animate({
scrollTop: $("#box1").offset().top
},
'slow');
});
$("#portfolio, #portfolio:hover").click(function () {
$('html,body').animate({
scrollTop: $("#box2").offset().top
},
'slow');
});
$("#social, #social:hover").click(function () {
$('html,body').animate({
scrollTop: $("#box3").offset().top
},
'slow');
});
$("#contact, #contact:hover").click(function () {
$('html,body').animate({
scrollTop: $("#box4").offset().top
},
'slow');
});
});
See updated JSFiddle
It doesn't work if your jQuery link and/or functions link are in the header.
It works for me if the js links are towards the end of your html like before the closing body tag.
I'm using a WordPress plugin to display a list of locations and a map of those locations.
I created the following function so that a link will scroll to a map when a link is clicked.
jQuery(document).ready(function($) {
$(".wpgmp_location_title h3 a").click(function() {
$('html, body').animate({
scrollTop: $("#map-selected").offset().top
}, 2000);
});
});
However, the plugin automatically adds the following to each link:
href="javascript:open_current_location(marker2259map2)">
This link causes the map-marker to open, however, it appears to be preventing the jQuery function from scrolling the page to the top of the page.
Any ideas how to overcome this?
You need to cancel the default event inside your click handler:
jQuery(document).ready(function($) {
$(".wpgmp_location_title h3 a").click(function(event) {
event.preventDefault();
$('html, body').animate({
scrollTop: $("#map-selected").offset().top
}, 2000);
});
});
Fiddle
An approach could be to override the open_current_location() function.
Take a look at this example, you could also execute the scrolling and then the original behaviour of open_current_location()
How would I link to an anchor on another page but when the new page loads also scrollTo the anchor?
Below is the JQuery when my anchro link is on the same page I need to tweak it so that is also animate when the linked clicked
html:
<li>My Link</l1>
My JQuery:
$('.faq_section li a').click(function(e) {
e.preventDefault();
$('html, body').animate({
scrollTop: $( $(this).attr('href') ).offset().top - 20
}, 600);
});
Page2.php:
<div id="about-us"></div>
You can do with following method
By clicking u can send some condition in URL and check that in jquery
E.g. xyz.com?p=scroll
Then in jquery on document.ready function check if 'p=scroll' is present by using indexOf. If yes then run your animate code (note. Above jquery code needs to be in output page)
Or try this http://webdeveloperswall.com/javascript/scrolling-to-different-areas-on-same-page