Hello I have two functions which are working. I understand a little about how programming works but I dont have background in javascript or jquery (idk).
This function opens a nav tab-content:
<script> function homeTab() {
$('[href="#nav-home"]').tab('show');
}
</script>
This function auto scrolls to the shopping div at the bottom:
<script>
$('#nav-shop-tab').click(function () {
var sectionTo = $(this).attr('href');
$('html, body').animate({
scrollTop: $(sectionTo).offset().top
}, 1500);
});
</script>
Functions above are all working
Home and Shop are in the same page. Shop is in bottom
This is the about tab
What I want is how can I merge these two functions? so that when I click a button(SHOP at GCO) it will first open the "home" tab then scroll down to the shopping div?
Is it possible? I'm open to other solutions as well so that I can learn more. Thanks
ok i made some fix, try changing the function when you click the shop tab to this
$('#nav-shop-tab').click(function () {
$("#nav-home-tab").click();
setTimeout(() => {
var sectionTo = $(this).attr('href');
$('html, body').animate({
scrollTop: $(sectionTo).offset().top
}, 1500);
}, 200);
});
Related
I'm using this script to automatically open specific tabs in an elementor toggle widget on page load using media strings.
<script>
document.addEventListener('DOMContentLoaded', function() {
setTimeout(function() {
jQuery(function($){
let toggletitles = $('.elementor-toggle-item .elementor-tab-title');
let strings = ['?technical',
'?configuration',
'?safety',
'?cycle-life',
'?discharge',
'?charging',
'?environmental',
'?mechanical'
];
strings.forEach( (string,i) => {
if (window.location.href.indexOf(string) > -1) {
toggletitles.eq(i).click();
$('html, body').animate({
scrollTop: toggletitles.eq(i).offset().top - 100
},'slow');
} } );
}); }, 1200); });
</script>
So if I were to enter the url https://electrovolt.com/prislogic-4s1p-120-ah/?safety it would load the page with the safety tab open. The problem is that when you load that link, it automatically scrolls down to that section of the page. I'd like to make sure that the link opens at the top of the page and stays there until the user scrolls down. Any ideas?
The following line is what is causing the browser page to animate a "scroll down" effect to where the widget is on the page:
$('html, body').animate({
scrollTop: toggletitles.eq(i).offset().top - 100
},'slow');
If you remove that line, your page should no longer scroll down.
Requirement : I want to redirect to a new page on click of a button and then I want to scroll to a particular section on the new page.
Issue :
This is how I'm currently redirecting
<div class="button know-more-btn">
<a href="/about-us#Who-We-Are" target="" class="btn-link btn-small">
KNOW MORE</a>
</div>
Now once it redirects on click of the button,I want it to to scroll to a particular section on the new page.
I'm currently trying to achieve this scenario with the below code :-
$('.know-more-btn').click(function () {
if(location.hash == "#Who-We-Are"){
$('html, body').animate({
scrollTop: $(".map-section").offset().top
}, 1000);
}
});
So on click of the know-more-btn,it should check the location.hash and scroll to the map-section div class on the new page.
But it only redirects and does not scroll to the desired section.
Please help me solve this issue.
Your code:
$('.know-more-btn').click(function () {
if(location.hash == "#Who-We-Are"){
$('html, body').animate({
scrollTop: $(".map-section").offset().top
}, 1000);
}
});
New code:
if(location.hash == "#Who-We-Are"){
$('html, body').animate({
scrollTop: $(".map-section").offset().top
}, 1000);
$('.know-more-btn').click(function () {
if(location.hash == "#Who-We-Are"){
$('html, body').animate({
scrollTop: $(".map-section").offset().top
}, 1000);
}
});
this jquery/javascript code will help you
function hashchanged(){
if(location.hash.substr(1)!='') $('html,body').animate({ scrollTop: ($('#'+location.hash.substr(1)).position().top-200) }, 'slow');
}
$(window).on('hashchange', function(e){
hashchanged();
});
hashchanged();
Any question im here.
You don't need jQuery for this, there's a built in method on every HTMLElement called scrollIntoView
Add the following script to your about-us page:
const map = document.querySelector('#Who-We-Are .map-section')
// simulates arriving at #Who-We-Are for the purpose of this example
window.location.hash = 'Who-We-Are';
addEventListener('DOMContentLoaded', event => {
if (window.location.hash === 'Who-We-Are') {
map.scrollIntoView({behavior: "smooth", block: "start"});
}
});
#Who-We-Are {
margin-top: 110vh;
}
.map-section {
margin-top: 20vh;
}
<section id="Who-We-Are">
<h2>Who We Are</h2>
<div class="map-section">Map</div>
</section>
this is my best solution which i had never seen this before. maybe this helpful for you.
below code for the page from that i want to redirect on click a link.
<div ><a onclick="myHash()"></a></div>
this is to redirect to a new page and send hash through url.
function myHash() {
$(document).ready(function () {
window.location.href="contact.html#link"
});
}
}
And On new page which i want open and scroll to the specific div.
<div id="link"></div>
And using url's hash to scroll specific div on new page
$(document).ready(function() {
if (window.location.hash) {
setTimeout(function() {
$('html, body').scrollTop(0).show();
$('html, body').animate({
scrollTop: $(window.location.hash).offset().top
}, 1500)
}, 0);
}
});
Im using div's with a onclick= function.
That in turn exectues a confirm box.
If users press OK. it redirects using: window.location.hash and auto scrolls to a div id.
Auto scroll works fine. But Animated scroll breaks at this point.
Using conventional a href's works fine with animated scrolling.
Im an amateur and pieced togheter the following code from different sources. I will post the code and hopefully someone has the answer.
Code:
function FrontAsNew() {
if (confirm("No damage allowed") == true) { window.location.hash = "#side"; }
else { window.location.hash = "#front"; }
}
<div id="cosmetics_box" style="cursor:hand; cursor:pointer;" onclick="FrontAsNew()">As new</div>
Animated scroll script:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js" ></script>
<script>
$('div').click(function(){
$('html, body').animate({
scrollTop: $( $(this).attr('href') ).offset().top
}, 2000);
return false;
});
So in short: Animated scrolling works fine with conventional a href links. But when using divs as links that exectue a function that uses location.hash the animated scrolling breaks.
Thanks for any help in advance!
Try something like this:
function FrontAsNew() {
if (confirm("No damage allowed") == true) {
scrollToTopById('side');
}
else {
scrollToTopById('front');
}
}
function scrollToTopById(id) {
$('html, body').animate({scrollTop: $('#' + id).offset().top}, 2000);
}
Can anyone explain to me how I can use the jquery scroll-to to make the buttons on the yellow menu scroll to their corresponding sections (i.e distribution to the pink block)
This is my code: http://jsfiddle.net/VXkW5/5/
I think its something like this:
$(".nav").click(function () {
$('html, body').animate({
scrollTop: $(".section").offset().top + $(".section").height()
}, 500);
});
But I dont know how to relate it to it's relevant section based on the link that was clicked.
Working Demo
First of all, ID need to be unique in the page. I see both as well as uses same ID
so i have made change & Just add the corresponding div id to the href tag, it will take to that particular div on click
posting
distribution
applicantions
In terms of jQuery:
$(".nav").click(function (e) {
e.preventDefault();
var divId = $(this).attr('href');
$('html, body').animate({
scrollTop: $(divId).offset().top;
}, 500);
});
You could have a link like
Click to jump to section 1
And a section like
<div id="section1">
<p>Section 1 content</p>
</div>
And handle the scroll to like so
<script type="text/javascript">
$(".nav").click(function (event) {
event.stopPropagation();
var theHref = $(this).attr('href');
$('html, body').animate({
scrollTop: $(theHref).offset().top + $(".section").height()
}, 500);
});
</script>
Hi I am working on a site where I have created "Toggle section" under the footer, but the problem is when the toggle opens the window does not scroll to the that toggled section that's why peoples can't see it. What I want is when the toggle open window should scroll to that section automatically when click toggle button to open it.
Here is the Js code that I have been using;
<script>
jQuery(document).ready(function(){
jQuery('#hideshow').live('click', function(event) {
jQuery('#ticket-content').toggle('show');
});
});
</script>
And the website is here; Click here for website
Hope to have any help soon.
Thanks in advance.
Try this. I might help you.
jQuery(document).ready(function(){
jQuery('#hideshow').live('click', function(event) {
jQuery('#ticket-content').toggle('show',function() {
jQuery('html, body').animate({
scrollTop: jQuery(this).offset().top
}, 2000);
});
});
});
Try:
jQuery(document).ready(function(){
jQuery('#hideshow').live('click', function(event) {
jQuery('#ticket-content').toggle(function(){
jQuery('html, body').animate({
scrollTop: jQuery(this).offset().top
}, 2000);
});
});
});