I am using the following javascript to pull in a 'back to top' button when scrolling down.
This works great on Firefox - but doesn't work on Chrome/Safari.
jQuery(document).ready(function(){
jQuery("#totop").hide();
jQuery(window).scroll(function(){
if (jQuery(this).scrollTop() > 100) {
jQuery('#totop').fadeIn();
} else {
jQuery('#totop').fadeOut();
}
});
jQuery('#totop').click(function(){
jQuery("html, body").animate({ scrollTop: 0 }, 660, 'easeInOutExpo');
return false;
});
});
Demo site http://demov3.joostrap.com
I have tried using noConflict.
As I've mentioned in the comments, there's a known issue with Google Chrome and some other WebKit browsers regarding fixed position and z-index.
Checking your page source, I would recommend the following changes:
<-- Set the body element z-index value to 0 (inline or
on the CSS stylesheet) -->
<body class="com_content view-featured layout- task- frontpage itemid-101 no-rtl" style="z-index: 0;">
<div class="body-wrapper">
...
</div>
<-- Stick the link as the last element within the body element, and change
its z-index value to 9999 (on the CSS stylesheet) -->
</body>
Related
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
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;
});
I have noticed an odd behavior while using jquery's scrollTop in IE 9, 10 & 11. When the function is triggered, IE resets the page scroll position to 0, the very top, then it animates down to the correct section. I am looking for a way to have the scroll behavior match that found in other browsers where it scrolls from the current position. Here is my relevant code:
First, I bind the click event to my element:
$("body").on("click", ".marker", function() {
window.requestAnimationFrame(function() {
theAutoScrollingFunctions.scrollToTarget("city", 5000);
});
});
Then my scrolling function:
$("html,body").animate({ scrollTop: $(document).height()}, 500, function() {
// Callback stuff
});
The scrolling technically works but in IE the page is reset to the top and then scrolls. I have tried placing return false; values throughout the process but with no luck.
Has anybody else seen this issue?
I use the same animate function when doing scroll-to sections on the sites I build. When testing in IE 8+ it works perfectly. Perhaps the $(document).height() is the part that makes the reset happen at the top?
This is how I like to do it:
<ul id="section-links">
<li>Scroll to section1<li>
<li>Scroll to section2<li>
</ul>
<section id="section1">
<h1>This is the first section</h1>
</section>
<section id="section2">
<h1>Another example section</h2>
</section>
<style>
section{display:block;width:100%;min-height:300px;}
</style>
<script>
jQuery(document).ready(function($){
$('#section-links a').click(function(){
var section = $(this).attr('href');
$('html, body').animate({scrollTop:$(section).offset().top - 10}, 'slow');
});
});
</script>
As you can see, I like to add some space above the scrolled-to section, so the title and whatnot is not jammed up against the viewport.
I have not seen the bug you describe using this method.
Best of luck
The issue seemed to be with my jQuery selector.
$("html,body").animate....
Changed to
$("html").animate....
This looks to have solved the issue in IE9+ and kept consistent behavior across the other browsers I have tested.
Forgive me if this has been asked, but I've been searching all day on here and have not seen any question relating to my specific problem.
I'm building a one page parallax-style website with a navigation bar utilizing a fixed position to allow users to quickly jump to different sections of the page.
Currently I'm trying to implement the scrollTo jQuery plugin (flesler/jquery.scrollTo - Github) to give a nice smooth animated scroll.
This is the 5th or 6th different jQuery method I've implemented to make this effect work with no success. The scrollTo method seems to be the closest to working, but it still won't work.
It does not work at all on Chrome 42.0.2311.90
It does not work at all on Firefox 37.0.2
It does work on Safari 5.1.10, but I haven't been able to check on the newest version of Safari. Also the site doesn't render right on Safari 5.1.10 yet. I also have not had access to a computer with IE.
The test site is located at http://revolt-designs.com/parallax/
Here is how I'm calling the script:
$(document).ready(function(){
$('#nav-links li a').click(function() {
$.scrollTo($(this).attr('href'), {duration: 3000});
});
});
And the links are formatted this way:
<div id="nav">
<ul id="nav-links">
<li>About</li>
<li>News</li>
<li>Events</li>
<li>Contact</li>
</ul>
</div>
For the sake of simplicity, the anchors are pointing to divs located on the page, ie:
<!-- GROUP 2 -->
<div id="group2" class="parallax__group">
<div class="parallax__layer parallax__layer--base">
Lorem Ipsum
</div>
</div><!-- end GROUP 2 -->
Hopefully someone will catch something small and easy that I'm missing. Thanks. To be clear, I'm not asking for an alternative to the script I'm using. I'm asking for help finding the underlying issue that's preventing any smooth scrolling scripts from working on my site.
Change your code to scroll on the .parallax element:
$(document).ready(function() {
$('#nav-links li a').click(function() {
$('.parallax').scrollTo($(this).attr('href'), {duration: 3000});
});
});
Here is a fiddle (Used the HTML from your webpage)
For the sake of browser compatibility, you could consider changing height: 100vh; in your css to perhaps use .height() instead:
$(document).ready(function() {
height = $(window).height();
$('.parallax').css('height',height);
$('#nav-links li a').click(function() {
$('.parallax').scrollTo($(this).attr('href'), {duration: 3000});
});
});
This snippet required jquery and jquery UI, you can remove the easing part at the end if you do not want to include jquery UI
$(document).ready(function(){
$('#nav ul li a').on('click', function(e) {
e.preventDefault();
var target = $(this).attr('href');
//changing the value of offsetValue will help account for fixed headers or whatever.
//EDIT: used data-offset to allow for multiple offsets defualt is 0.
offsetValue = $(this).data('offset') | 0;
$('html, body').animate({
scrollTop: $(target).offset().top-offsetValue
},
{
duration: 2000,
easing: "easeOutQuint"
});
//number at the end here changes the speed, slower = higher
});
});
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);
});
});