jQuery scroll from button to section problem - javascript

I've got a problem with my jQuery.
I want to scroll my site by clicking button with class "my-name" in my header:
<header>
<button class="my-name"></button>
</header>
to a
<section class="about"></section>
I gave position relative to both header and section, and put height: 100vh;
this is my jQuery code:
const $nameBtn = $(".my-name");
const $about = $(".about").offset().top;
$nameBtn.on("click", function() {
$("body").animate(
{
scrollTop: $about
},
1000
);
});
I've tried using console.log to see if my code works, and it should.
I see my variables.
I've also tried using id's not classes, but it didn't make a difference.
I'm just starting with jQuery, do you have some ideas, why it doesn't wokr?

Change your code to
$("html, body").animate({
scrollTop: $about
},1000);
You need to use $('html, body'). You need to use both html and body to ensure compatibility with some browsers because some browsers set scrollTop on body, while others set it on html

Related

When clicking on a button on IOS, iframe is not scrolling

I am trying to scroll down to some element when clicking on a button. But it isn't working.
The way I am using to do that is using query:
if (navigator.userAgent.match(/(iPod|iPhone|iPad|Android)/)) {
console.log('ios');
$("html, body, .wrapper").animate({
scrollTop: offset
}, 500);
} else {
$("html, body").animate({
scrollTop: offset
}, 500);
}
Those cases are almost the same, just read somewhere that animate is not working on html and body tags on ios.
However still can't make it work.
This is inside:
$(".elem").click(function () {
var offset = somenumber;
//and the code above
});
The way I've fixed it, is that I used jquery plugin called postMessage, which is a good way for cross-domain frame communication.
http://benalman.com/projects/jquery-postmessage-plugin/

smooth scroll does not work with overflow-y

I am trying to use a smooth scroll and adopted an example I found online. Here is a fiddle with my code
https://jsfiddle.net/4DcNH/144/
I have special conditions set to html and body (basically to offset the page context by 50px from the top to avoid the navbar). Therefore the smooth scroll does not work. Does anybody know a solution to this?
thanks
carl
$(document).ready(function() {
$('a[rel="relativeanchor"]').click(function(){
$('html, body').animate({
scrollTop: $( $.attr(this, 'href') ).offset().top
}, 2000);
return false;
});
});
Is this what you're after?
$(document).ready(function () {
if(!/chrom(e|ium)/.test(navigator.userAgent.toLowerCase())){
$('html').css({'overflow-x':'auto','overflow-y':'hidden'});
}
$('a[rel="relativeanchor"]').click(function () {
var $el = $($(this).attr('href'));
$('html, body').stop().animate({
scrollTop: $el.prop('offsetTop')
}, 2000);
return false;
});
});
JSFiddle
Updates were needed in the CSS. The html overflows were removed for chrome, because otherwise, this would not work in Chrome. However, the overflows are needed for Firefox, so they are done by setting it dynamically in the JavaScript (set if not chrome).
If you want to maintain an offset, subtract it from the calculated offset. Given the above, $el.prop('offsetTop') - 50 adds 50px above.
The issue appears to be related to differences in how Chrome scrolls the <body> with height:100%. A discussion of the issue is here: Body set to overflow-y:hidden but page is still scrollable in Chrome
A workable solution is to wrap the scrolling content in <div class="content"> and disable scrolling on <body>.
Here's a JSFiddle to demonstrate the updated behavior: https://jsfiddle.net/f1zv1c5k/5/
To get the scroll to stop at the appropriate point, you need to subtract the vertical offset applied to the <html> tag (using $el.prop('offsetTop') recommended by #vol7ron) when scrolling. Your smooth scroll function would look like this:
$('a[rel="relativeanchor"]').click(function(){
var $el = $($(this).attr('href'));
$('.content').animate({
scrollTop: $el.prop('offsetTop')
}, 2000);
return false;
});

Scroll to a specific div

I have few divs .posts which have a attr data-id which corresponds to the mysql DB id.
<div class="posts" data-id="1"></div>
<div class="posts" data-id="2"></div>
Now if I want to scroll to a specific div which I am only known to the data-id.
How will I scroll to it?.
My JSFiddle is here.
Can anyone give an example along with a JSFiddle?
You use link anchors and JQuery.
Just give your link the class "scroll" and use the following code in the head:
$(function() {
// Listen for a click event on the anchor
$('.scroll').click(function(event) {
// Prevent the jump to target that is default browser behavior
event.preventDefault();
// Animate the scrollTop property of the scrollParent to the top offset
// of the target element. In this case, we have an animation duration of 1000ms(1 second).
$('html').animate({
scrollTop: $(this.hash).offset().top
}, 1000);
});
});
/* Just for demo purposes */
.post {
margin: 100vh 0;
background: yellow;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Go To Div 8
<div class="post" id="anchor">Scroll to me</div>
You can use jQuery.ScrollTo plugin: https://github.com/flesler/jquery.scrollTo
In this link you can find demos http://demos.flesler.com/jquery/scrollTo/
$(function() {
$('body').scrollTo($('div[data-id=1]'), 1000); //scroll to div 1
});
HTML:
<div class="posts" data-id="1"></div>
You don't need javascript if you have an anchor with a name.
Div to post 8 scrolls to <a name="post8"></a>
I'm seeing a lot of jQuery and Javascript in here, and simple CSS is here to help!
html,body {
scroll-behavior: smooth;
}
To put this in action, use a link and give it an href with the id of the element you're scrolling to:
Section One
<div id="sectionOne">
<h2>Section One</h2>
</div>
Not all browsers however support the scroll-behavior property, in which case I'd recommend the selected answer near the top ;)
Animate to last item with specific attribute
$('html').animate({
scrollTop: $('className:last[data-id]').offset().top - 100
}, 500);
I think this would help $(".element").attr("any-attribute-of-ur-elem");
In your case it would look like: $(".post").attr("data-id")
And you can scrollTo that posts.
try this:
$(document).ready(function (){
$("#button").click(function (){
$('html, body').animate({
scrollTop: $(".post[data-id="+yourID+"]").offset().top
}, 2000);
});
});

.js Scroll left and right of page

I have the following script and page layout - http://jsfiddle.net/wLkYg/ that allows the user to scroll up and down on my website, with a neat little javaScript swing effect.
However, as I would like to now arrange the content (colored #div boxes from the jsfiddle example above) to be next to each other/side to side, it loses the scrolling effect - http://jsfiddle.net/UjeZH/.
How would I be able to achieve the same transitions in second example, as it is in the first?
I have two versions of what you need already made up for you.
Version 1: Divs on top of each other
Version 2: Divs on top and next to each other
Check them out and tell me if they suit your need.
Both versions are designed in a way so each div will have your page's height and width.
The first version doesn't have the swing effect but you can add it by:
Including jQuery
Adding the following JS ( the same as the second version )
var $root = $('html, body');
$('a').click(function () {
$root.animate({
scrollLeft: $($.attr(this, 'href')).offset().left,
scrollTop: $($.attr(this, 'href')).offset().top
}, 500);
return false;
});
Also if you use the above code, it will fix your problem, as it allows you to scroll vertically and horizontally. The code that you have allows you to scroll only vertically that's why it is not working when you align your divs horizontally.
document.body.addEventListener('wheel', function (e) {
console.log(this.scrollLeft)
e.preventDefault()
if (e.deltaY > 0) {
this.scrollLeft += 10
} else {
this.scrollLeft -= 10
}
})
set css and test it
html,body {width: 2000px; height: 200px; background: orange}
same as it,you can get event by another element.

click to scrollTop some pixels using jquery

I try to load specific location in same page. But the problem is, the header is fixed on position top, When I click the links, the header go behind of the header. So I am not able to show some contents. Please visit this Fiddle. You can understand what I am try to say.
I dont like to add padding and margin.
You might want to change your HTML. There can be only one id per page.
In the given fiddle, you have a repeating <div id="one">
Now, to get the scroll working, you could do something like this :
$(document).ready(function(){
$("a").click(function(e) {
e.preventDefault();
var hash = $(this).attr("href");
//console.log($(hash).position().top);
$('html, body').animate({ scrollTop: $(hash).position().top - 50 }, 200);
});
});
Here $(hash).position().top gets the position of the div on the page and I subtract 50 from it (the height of the fixed div).
Here is a fiddle
​

Categories

Resources