Trying to implement a unique scrolling effect where, upon triggering the onclick event, I want the div1 element to smoothly scroll towards dev2. The movement should start slow and then increase in speed!
Check out an example of this effect on a website:
Any suggestions on how to achieve this?
$.fn.scrollAnimateDivs = function(startingDiv, endingDiv) {
var startingPoint = '#' + startingDiv;
var endingPoint = '#' + endingDiv;
$('html, body').animate({
scrollTop: $(endingPoint).offset().top
}, 1200, 'easeInExpo');
};
function animateScrollBar(startingDiv, endingDiv) {
$.fn.scrollAnimateDivs(startingDiv, endingDiv);
}div {
height: 650px;
width: 1000px;
}
button {
background-color: #FE2EF7;
}
.downButton {
margin-top: 500px;
margin-bottom: 40px;
margin-right: 200px;
margin-left: 200px;
}
.upButton {
margin-top: 60px;
margin-bottom: 500px;
margin-right: 200px;
margin-left: 200px;
}<body>
<div id="section1" style="background-color:red;">
<button class="downButton" onclick="animateScrollBar('section1','section2');">Scroll Down</button>
</div>
<div id="section2" style="background-color:yellow;">
<button class="upButton" onclick="animateScrollBar('section2','section1');">Scroll Up</button>
<button class="downButton" onclick="animateScrollBar('section2', 'section3');">Scroll Down</button>
</div>
<div id="section3" style="background-color:grey;">
<button class="upButton" onclick="animateScrollBar('section3', 'section2');">Scroll Up</button>
<button class="downButton" onclick="animateScrollBar('section3', 'section4');">Scroll Down</button>
</div>
<div id="section4" style="background-color:#2E9AFE;">
<button class="upButton" onclick="animateScrollBar( 'section4', 'section1');">Go To Top</button>
</div>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js "></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/jquery-ui.min.js "></script>Would you like to use this? Feel free to rearrange the button positions as needed.
I've incorporated jQuery version 1.11 and jQuery UI version 1.11 in this code snippet.
Utilize ScrollTop in conjunction with offset().top for scrolling to specific DIV nodes.
HTML
Ensure to assign an "active" class to the DIV element you want displayed first upon page load. In this case, it's the initial DIV item.
<button class="giu">Animate To Next available List Item</button>
<div class="product active" id="product1">1</div>
<div class="product" id="product2">2</div>
<div class="product" id="product3">3</div>
<div class="product" id="product4">4</div>
JavaScript
$('.giu').click(function(event) {
event.preventDefault();
var n = $(window).height();
$('div.active').removeClass('active').next('div').addClass('active');
$('body').animate({
scrollTop: $(".product.active").offset().top
}, 500);
});
I've successfully created a Vertical Menu with hidden submenus, but I'm struggling to make the submenu appear on hover. Any suggestions on how to achieve this? Also, I'd like to align the text all the way to the left and remove the bullets f ...
I am trying to implement a feature where I have a submit button labeled "details" and a table with radio buttons in each row. When a user selects a radio button and then clicks the details button, I want a popup to appear. Here is an example of my code: ...
Can anyone help me figure out how to encode a mailto link properly with JSON data in the query parameters, ensuring that it works even if the JSON data contains spaces? Let's consider this basic example: var data = { "Test": "Property with spaces" ...
Recently, I encountered a strange issue with my project. An animation effect that was working perfectly fine suddenly stopped working when I opened the project. To troubleshoot, I downloaded the same project from my GitHub repository and found that the ani ...
<script type="text/javascript"> $(document).ready(function() { var linkas = $("#button").attr("value"); $('#button').click(function(){ $.get(linkas, function(data){ $(' ...
Recently, I came across this interesting code snippet: $(document).ready(function(){ $(window).scroll(function(){ if($("#1").offset().top < $(window).scrollTop()); $("#1").animate({"color":"#efbe5c","font-size":"52pt", "top":"0", "position":"fix ...
I'm currently working on creating a sample chat room application using reactjs and redux for educational purposes. In this scenario, there will be 3 users and the Message_01 component will be reused 3 times. Below is the code snippet: const Main = Re ...
Is there a method to change the color of the overlapped common part of two animated circles? ...
I've been trying to center a paragraph in my project but it's not working out. I attempted using margin:0px auto; and the text-center features, but they didn't have the desired effect. <div class="row text-center"> <p> You c ...
I am working on a mat-select component that offers two options: Individual Customers and Organizational Customers. When selecting Individual Customers, the dropdown should display three options: First Name, Last Name, and Customer Id. However, when choosin ...
I am looking to create a formatted list using <ol> and <ul> tags with parentheses included. (1) List1 (2) List2 (3) List3 (4) List4 The challenge is to achieve this formatting purely with javascript or jQuery, without relying on any external ...
I need a solution for creating persistent placeholders in input and select boxes. For instance, <input type="text" placeholder="Enter First Name:" /> When the user focuses on the input box and enters their name, let's say "John", I want the pl ...
Issue: The image in the gallery keeps changing dynamically, but the article content remains static. Upon clicking on the article, an image gallery opens with a large display image and several thumbnail images in a carousel format. Scenario 1 : I must en ...
My website is up and running with separate folders for ico, img, css, and js within the html directory. However, I've noticed that when a user navigates to mydomain.com/img, they are able to see a list of all the images in that folder. This doesn&apos ...
I have this example: link HTML CODE: <div class="common-class"> <div class="trigger"> <span class="plus">+</span> <span class="minus">-</span> </div> <div class="show"></div> </div&g ...
Hey there, I've encountered a little issue. I managed to create a diagonal shape on my webpage similar to the one shown in this image: https://i.sstatic.net/tMgpd.png Now, what I'm aiming for is something like this: https://i.sstatic.net/xToz7.p ...
I'm currently in the process of designing a WordPress template and focusing on customizing the menu. Here is what I have created so far: http://jsfiddle.net/skunheal/Umkyr/ However, there are two minor issues that I am struggling to address. In Word ...
/* Creating an event listener for the submit button */ YAHOO.util.Event.addListener(webserver.result_form, 'submit', webserver.result_submit); In my main.js, I currently have this event listener set up. I was curious to know if in YUI there is ...
Why are unwanted line breaks appearing in my rendered DOM that are not in the source code, causing the content to be displaced? And how can I resolve this issue? Below is the code snippet: <div class="float-left" style="position:relative;left:15px"> ...
I am working with a wysiwyg editor that utilizes a $scope variable to generate HTML content. Currently, I am trying to dynamically add div elements at specific locations within the HTML string. This will allow me to programmatically modify different parts ...