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);
}
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.
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);
});
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);
}
});
I'm a jQuery novice. I have two functions on the same page:
one which is a smooth scroll to an ID
the other which shows a "back to top" element after the user scrolls a set distance.
The functions work on their own, but when I combine them as shown below, the "back to top" function doesn't work.
I think I'm missing something obvious and could use some help.
Thanks!
Update: This fiddle shows the problem:
back to top jsfiddle
If the smooth scroll block is disabled, the back to top function works.
jQuery(document).ready(function(){
//smooth scrolling
$('a[href^="#"]').on('click',function (e) {
e.preventDefault();
var target = this.hash,
$target = $(target);
$('html, body').stop().animate({
'scrollTop': $target.offset().top -150}, 900, 'swing', function () {
window.location.hash = target;});
});
// Show or hide the back to top footer button
$(window).scroll(function() {
if ($(this).scrollTop() > 200) {
$('.go-top').fadeIn(200);
} else {
$('.go-top').fadeOut(200);
}
});
// Animate the scroll to top
$('.go-top').click(function(event) {
event.preventDefault();
$('html, body').animate({scrollTop: 0}, 900);
});
});
Hi #DavidCara Just add
<div id="top"></div>
after immediate <body> tag it'll defiantly work.
See updated jsfiddle Here
Use this simple code in html tags directly.
<a onclick="$('html, body').animate({scrollTop: 0}, 900);" href="javascript:;">back to top </a>
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>