Develop Reference

Unexpected page scroll when element loads

I am loading an embeddable element, but when the page loads it jumps/scrolls to the element. I've tried adding in a function that would scroll to the top of the page using jQuery, but to no avail.
I've noticed this behaviour on Chrome and Edge, however, it does not occur on FireFox. Any clues?
I expected the page to not scroll to the element. I added the jQuery function and still experience the same behaviour.
const elementConfig = {
language: 'en-US',
trip: {
originAirport: "RIX",
destinationAirport: "TLL"
},
placement: '',
features: {
showFilters: true,
showMapLegend: true,
}
}
function onSherpaEvent(event) {
// Ensure that the sdk is loaded before creating the element:
if (event.type === 'sdkLoaded') {
$sherpa.V2.createElement('map', elementConfig).mount('#sherpa-trip-element');
}
}
$(document).ready(function() {
// Handler for .ready() called.
$('html, body').animate({
scrollTop: $('#what').offset().top
}, 'slow');
});
<script src="https://sdk-sandbox.joinsherpa.io/widget.js?appId=sxM5NjIzNz" defer></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<div id="what">What</div> <br> some <br> content <br> that <br> is <br> just <br> meant <br> to <br> be <br> a <br> placeholder <br> in order <br> to see <br> if <br> this <br> scroll <br> issue <br> happens <br> here
<div id="sherpa-trip-element">sherpa-trip-element</div>

You need to ask Sherpa. There are hundreds of scroll calls in the widget. There is no callback on mount and the document.ready is already triggered when the sherpa focuses.
The best bet is to move the widget into an iFrame you control

Try to Check the version.
Here: https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/Browser_support_for_JavaScript_APIs

Why does scrollTop not respond?

The other jQuery scripts on the page are working fine, just not scrollTop, I could even get it to work on https://jsfiddle.net/ivolong/tyvusdte/ just not on my website, which is using JQuery 3.2.1.
In between script tags in the body I have:
$("#button1").click(function() {
$('html, body').animate({
scrollTop: $("#slide2").offset().top
}, 3000);
});
$("#button2").click(function() {
$('html, body').animate({
scrollTop: $("#slide1").offset().top
}, 3000);
});
Then I have:
<div class="slide" id="slide1">
<p id="title">Title</p>
<div id="specialText">
<p>Line 1.</p>
<p>Line 2.</p>
<p>Line 3.</p>
<p>Line 4.</p>
</div>
<button class="button" id="button1">↓</button>
</div>
<div class="slide" id="slide2">
<p id="title">Title</p>
<div id="text">
<p>Line 5.</p>
<p>Line 6.</p>
<p>Line 7.</p>
<p>Line 8.</p>
</div>
<button class="button" id="button2">↓</button>
</div>
But it doesn't respond when the button is clicked

It's because the javascript code is above the html code. At that point when the javascript code is interpreted, there are not buttons rendered which leads to no event handler being attached.
You can fix this by placing you javascript code under you html code, or like correctly in a comment below mentioned: by wrapping your code inside jQueries document.ready function which will look like:
$(document).ready(function() {
$("#button1").click(function() {
$('html, body').animate({
scrollTop: $("#slide2").offset().top
}, 3000);
});
$("#button2").click(function() {
$('html, body').animate({
scrollTop: $("#slide1").offset().top
}, 3000);
});
});

smooth scroll to DIV after click on Submitt

I would like to smooth scroll to part called "result" after click on Submit button. But only result I get is just normal scroll, not smooth scroll.
Here is piece of HTML code:
<form action="index.php#result" method="post">
<div id="search-box">
<?php include 'submitt.php'; ?>
<input type="text" name="city" placeholder="Enter city name">
<input type="submit" name="SubmitButton" id="SubmitButton">
</div>
</form>
And here is the result section code:
<section id="result" class="container content-section text-center">
<div class="col-md-8 col-md-offset-2">
<p class="intro-text">Text.</p>
<?php include 'q.php'; ?>
</div>
</section>
A set following in JavaScript:
$("#SubmitButton").submit( function() {
$('html, body').animate({
scrollTop: $("#result").offset().top
}, 2000);
return false;
});
Can you please help how to get the smooth scrolling effect after click on Submit button?
I use Bootstrap framework there.
Many thanks.

see this example http://jsfiddle.net/kevalbhatt18/8tLdq/2129/
I updated your fiddle
$("#myButton").click(function() {
$('html, body').animate({
scrollTop: $("#myDiv").offset().top
}, 2000);
});

You can use Smooth Scrool Plugin: https://github.com/kswedberg/jquery-smooth-scroll

try this
$("#SubmitButton").submit( function() {
$('body').scrollTo('#result',{duration:2000});
return false;
});

Chris Coyier never lets me down. Here is his solution. Again, I can't stress enough that this isn't my solution, it belongs to a legend. Check out the origin by clicking his name above.
// Scroll to specific values
// scrollTo is the same
window.scroll({
top: 2500,
left: 0,
behavior: 'smooth'
});
// Scroll certain amounts from current position
window.scrollBy({
top: 100, // could be negative value
left: 0,
behavior: 'smooth'
});
// Scroll to a certain element
document.querySelector('.hello').scrollIntoView({
behavior: 'smooth'
});
In my opinion, this is a better solution.

show/hide an overflow div on anchor

I'm trying to make a div appear (if not already visible) and be scrolled to a specific anchor. I found this answer and try to use it but it looks like it doesn't work well...
https://stackoverflow.com/a/7513110/3703099
My code : http://jsfiddle.net/0sq2rfcx/9/
As you can see, when you click on button it scroll to the anchor, but if you click again, it scroll to an other position... I would like to make it stay on the current anchor if you keep clicking the button.
Can you help me to find what I did wrong plz ?
$('#b1').click(function() {
$('#result').show();
$('#result').scrollTop($('#a1').offset().top);
});
$('#b2').click(function() {
$('#result').show();
$('#result').scrollTop($('#a2').offset().top);
});
$('#b3').click(function() {
$('#result').show();
$('#result').scrollTop($('#a3').offset().top);
});
#result {
display: none;
height: 200px;
overflow-y: auto;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<button id='b1'>b1</button>
<button id='b2'>b2</button>
<button id='b3'>b3</button>
<button onclick="$('#result').hide();">hide</button>
<div id='result'>
<p>bla 0</p>
<br/>
<br/>
<br/>
<br/>
<br/>
<p id='a1'>bla 1</p>
<br/>
<br/>
<br/>
<br/>
<br/>
<p id='a2'>bla 2</p>
<br/>
<br/>
<br/>
<br/>
<br/>
<p id='a3'>bla 3</p>
<br/>
<br/>
<br/>
<br/>
<br/>
</div>

I've just updated your jsfiddle: http://jsfiddle.net/0sq2rfcx/8/
This should work on all browsers included IE7
$('#b1').click(function () {
$('#result').show();
$("#result").animate({ scrollTop:$('#a1').parent().scrollTop() + $('#a1').offset().top - $('#a1').parent().offset().top}, "slow");
});
$('#b2').click(function () {
$('#result').show();
$("#result").animate({ scrollTop:$('#a2').parent().scrollTop() + $('#a2').offset().top - $('#a2').parent().offset().top}, "slow");
});
$('#b3').click(function () {
$('#result').show();
$("#result").animate({ scrollTop:$('#a3').parent().scrollTop() + $('#a3').offset().top - $('#a3').parent().offset().top}, "slow");

You can use position instead to scroll like one below:
DEMO HERE
$('#b1').click(function () {
$('#result').show();
$('#result').animate({
'scrollTop' : $("#a1").position().top-10 //-10 here is just to set it in view!!
});
});
Added animation for smoothness

Fade Multipie Texts with Buttons Click

I want to make a text box or an area in my website, and I have about 9 buttons in the page which I don't want to redirect to other pages and open in the same page and in the same Text Box or The Area that I create.
So, if someone click on Button 1, then open the Text 1 and its picture(s) with fades in animation, and when click on Button 2, Text 1 Box fades out and Text 2 with picture(s) fades in and etc. How can I do this?
I have tried some codes like this
$('.one').hide();
$('.two').hide();
$('.three').hide();
$('.btn1').click(function () {
$('.one').fadeIn();
});
$('.btn2').click(function () {
$('.one').fadeOut();
$('.two').fadeIn();
});
$('.btn3').click(function () {
$('.two').fadeOut();
$('.three').fadeIn();
});
Fiddle
but when click the buttons , the Buttons position is not fixed and move with the text animation.
Is there any ways to do the same with other codes?

$('.one').hide();
$('.two').hide();
$('.three').hide();
$('.btnall').hide();
$('.btn1').click(function () {
$.when($('.btnall').fadeOut()).done(function(){
$('.one').fadeIn();
});
});
$('.btn2').click(function () {
$.when($('.btnall').fadeOut()).done(function(){
$('.two').fadeIn();
});
});
$('.btn3').click(function () {
$.when($('.btnall').fadeOut()).done(function(){
$('.three').fadeIn();
});
});
I think this is what you need.
Updated Fiddle

More scalable and dynamic solution:
$('button').on('click', function () {
var targetEl = $(this).data('target');
$.when($('.' + targetEl).siblings('input').fadeOut()).done(function () {
$('.' + targetEl).fadeIn();
});
});
HTML:
<input class="one" value="Text 1">
<input class="two" value="Text 2">
<input class="three" value="Text 3">
<br>
<button data-target="one" class="btn1">Button 1</button>
<br>
<button data-target="two" class="btn2">Button 2</button>
<br>
<button data-target="three" class="btn3">Button 3</button>
Demo: https://jsfiddle.net/tusharj/91jfvqwm/8/

You can wait fadeOut to complete before fading in new text field.
for example
$('.btn1').click(function () {
$('.btnall').fadeOut('slow', function() {
$('.one').fadeIn();
});
});