Scroll to a specific div - javascript

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);
});
});

Related

jQuery scroll from button to section problem

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

how to make ul scroll down when full?

I have a <ul> defined as
<ul id="messages">
</ul>
I do not have any <li> items defined in html but in my javascript I use jquery to add <li> items to the <ul>
$("#messages").append("<li>" + string + "</li>");
When I keep adding messages it does not automatically scroll down to the newest added li items when it has too many li items to fit the screen. How do I get the li to scroll down?
You need to use CSS to achieve this:
ul {
overflow-y: scroll;
}
You also need to give the UL a max-height for this to work.
You're looking to automatically have the page scroll down to a li when it's added?
You need to use jQuery and javascript to get the <li>'s offset from the top of the window. Then set scroll the window to that position.
var offset = $('li').offset().top;
$('body').scrollTop(offset);
Here's an example
If you want to animate it use something like this:
$('html,body').animate({
scrollTop: offset
}, 1000);
I've done it on a click event as you haven't really said when you adding the item
HTML you need to get working example is
<button id="click">Click me</button>
<ul id="messages">
</ul>
JQuery is
$(document).ready(function (){
$("#click").click(function (){
$("#messages").append("<li>pow</li>");
//$(this).animate(function(){
$('html, body').animate({
scrollTop: $("#messages li").last().offset().top
}, 2000);
//});
});
});
JSFiddle

Clicking link scroll to element then add a class to the element

I have this html markup:
<div id="main">
<p>some text</p>
<a id="goto-notes" href="#">see notes</a>
<p>some text...</p>
<div id="notes">
<p>notes here</p>
</div>
</div>
Now I would like to scroll to the div#notes when clicking a#goto-notes then add a class (seen) to the div#notes to change styling. I use jquery scrollTo before to get it done easily but now I want to know how to do this without the scrollTo or any plugin. I've done some research and this is what I got so far.
$('#goto-notes').click(function(){
$('#main').animate({scrollTop:500},'slow');
$('#notes').addClass('seen');
});
at the moment div#notes is on 500px+ below the link.
How can I auto target it without specifying 500 similar to this method in scrollTo => $('#main').scrollTo('#notes'); because I may change the text on the top some time so div#notes is not anymore at 500.
also how to addclass only when the scrolling animate is finished, because if the text is very long when animate scroll reach the div#notes the styling is already finished (I put css transition to smoothly change styling), I want the user to see the transition.
How can I auto target it without specifying 500 .... You just need to get the top position of the #notes like this: $('#notes').position().top
also how to addclass only when the scrolling animate is finished... You might wanna check the animate() API docs again, animate() has a complete: function() that is called once the animation is complete.
Here it is:
$('#goto-notes').click(function(){
var n = $('#notes);
$('#main').animate({
scrollTop: n.position().top
},{
duration: 2000,
complete: function(){
n.addClass('seen');
}
});
});
And here is the fiddle
You can use .offset() to find the top value
Use the complete callback of animate()
Try
$('#goto-notes').click(function () {
var $notes = $('#notes');
$('body').animate({
scrollTop: $notes.offset().top
}, 'slow', function () {
$notes.addClass('seen');
});
});
Demo: Fiddle

jquery javascript chrome/safari issue

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>

Change vertical nav to horizontal using jquery

Basically I have an unordered list acting as my navigation on a one page website sorted by sections. These sections or panels are full width and height of the browser window.
In the first panel, this list is vertical but when the user scrolls down the page to section two (i.e. the second panel from the top of the browser window) I'd like to change the style of it so that it fixes to the top of the browser window and becomes a horizontal nav instead of a vertical one. I don't want to duplicate the list if possible.
I'm not great at jQuery and don't really know where to start. Any help would be great.
This is my current code that gets the width and height of the browser window and displays a full screen div:
function fitElements(){
var height=$(window).height();
var width=$(window).width();
$('.panel').css('height',height);
$('.panel').css('width',width)
};
Here's a very simple example:
DEMO
html:
<ul id="nav">
<li>One</li>
<li>Two</li>
<li>Three</li>
</ul>
<div id="divOne" class="panel">
</div>
<div id="divTwo" class="panel">
</div>
<div id="divThree" class="panel">
</div>
css:
#nav {
position:fixed;
top:0;
left:10px;
}
#nav.horizontal li {
float:left;
}
#divOne {
background-color:#cef;
}
#divTwo{
background-color:#efc;
}
#divThree{
background-color:#fce;
}
​
js/jQuery:
$("div.panel").css({
height: $(window).height(),
width: $(window).width()
});
$(window).scroll(function() {
($("#divTwo").offset().top <= window.pageYOffset) ? $("#nav").addClass("horizontal") : $("#nav").removeClass("horizontal");
});
$("#linkOne").click(function(e){
$('html, body').animate({
scrollTop: $("#divOne").offset().top
});
$("#nav").removeClass("horizontal");
e.preventDefault();
});
$("#linkTwo").click(function(e){
$('html, body').animate({
scrollTop: $("#divTwo").offset().top
});
$("#nav").addClass("horizontal");
e.preventDefault();
});
$("#linkThree").click(function(e){
$('html, body').animate({
scrollTop: $("#divThree").offset().top
});
$("#nav").addClass("horizontal");
e.preventDefault();
});
​
Okay, providing I understood you correctly (see my comment looking for clarification), your goal is to make sure that your navigation pane is visible to your site visitors even when they scroll down the page. I would caution you against changing the nav bar to show horizontally after reaching a certain point on the page only because it will look pretty choppy, especially in slower browsers, unless (and sometimes even if) you provide a lot more code (complex for a novice) to smooth out the transition.
What I suggest is that you take a look at this question from a few days ago. I created a demo for the effect that he was looking for, which is very similar to what you are looking for, and hosted it on my development site. Take a look and if it's something that you like and if it is and you have trouble implementing it let me know and I'll be more than happy to help you.

Categories

Resources