Upon reaching a specific milestone on the page, automatically scroll to the designated anchor point

Question

Upon reaching a specific milestone on the page, automatically scroll to the designated anchor point

Here's the deal:

I plan to showcase 4 divs on my page. Each div will have a specific height (around 1500px) but will span the full width of the screen. To add some flair, each div will be a different color.

My goal is for JavaScript to kick in once the user starts scrolling and automatically guide them to the next div when they reach a certain point.

Imagine this scenario: as the user scrolls vertically and div #2 comes into view while div #1 fades away, I want the page to seamlessly scroll down so that div #2 aligns perfectly with the top of the browser window right before div #1 completely disappears.

An example that showcases this concept well can be seen at: The functionality there is what I'm aiming for but struggling to implement.

1

Content here

2

Content here

3

Content here

4

Content here

javascript html css

Answer 1

Answer №1

That webpage is not really working for me :/

However, if I understand correctly, you can create anchors on top of each div, attach some code to the scroll event, monitor the scrollTop() value, and navigate to the anchors when this value falls within a specific range. Check out this example fiddle with jQuery code snippet:

$(window).bind('scroll', function(){
    if (($(window).scrollTop() > 1300) && ($(window).scrollTop() < 1350)) {
        window.scrollTo(0,1500);
    }
});

This behavior may seem odd to users, especially when scrolling up. To improve this, we can determine whether the user is scrolling up or down on the page by comparing the current scroll position with the previous one. Take a look at this updated fiddle, which includes this functionality:

var currentScroll = 0;
var previousScroll = 0;

$(window).bind('scroll', function(){
    currentScroll = $(window).scrollTop();
    if (($(window).scrollTop() > 1300) && ($(window).scrollTop() < 1350) && currentScroll > previousScroll) {
        window.scrollTo(0,1500);
    }
    previousScroll = $(window).scrollTop();
});

You would need to include more if statements for additional "jumps" in your page.

Answer 2

That webpage is not really working for me :/

However, if I understand correctly, you can create anchors on top of each div, attach some code to the scroll event, monitor the scrollTop() value, and navigate to the anchors when this value falls within a specific range. Check out this example fiddle with jQuery code snippet:

$(window).bind('scroll', function(){
    if (($(window).scrollTop() > 1300) && ($(window).scrollTop() < 1350)) {
        window.scrollTo(0,1500);
    }
});

This behavior may seem odd to users, especially when scrolling up. To improve this, we can determine whether the user is scrolling up or down on the page by comparing the current scroll position with the previous one. Take a look at this updated fiddle, which includes this functionality:

var currentScroll = 0;
var previousScroll = 0;

$(window).bind('scroll', function(){
    currentScroll = $(window).scrollTop();
    if (($(window).scrollTop() > 1300) && ($(window).scrollTop() < 1350) && currentScroll > previousScroll) {
        window.scrollTo(0,1500);
    }
    previousScroll = $(window).scrollTop();
});

You would need to include more if statements for additional "jumps" in your page.

Answer 3

Answer №2

The following code snippet presents a solution, which seems to be functioning correctly on my local machine but not on jsFiddle. I recommend testing it in your preferred code editor for better results.

<HTML>
 <HEAD>
  <SCRIPT LANGUAGE="JavaScript">
    var isWorking = false;
var lastScrollPosition
function adjust(oDiv) {
    if(oDiv.scrollTop > lastScrollPosition && !isWorking && oDiv.scrollTop % 400 > 300) {
        isWorking = true
        scroll(oDiv);
    } else
        lastScrollPosition = oDiv.scrollTop;
}

function scroll(div) {
    if(div.scrollTop % 400 > 10) {
        div.scrollTop = div.scrollTop + 10;
        lastScrollPosition = div.scrollTop;
        setTimeout(function(){scroll(div);}, 10);
    } else
        isWorking = false;
}
  </SCRIPT>
 </HEAD>

 <BODY>
  <div style="height: 440px; border: solid 1px red; overflow-Y: auto" onscroll="adjust(this)">
    <div style="height: 400px; border: solid 1px green"></div>
    <div style="height: 400px; border: solid 1px green"></div>
    <div style="height: 400px; border: solid 1px green"></div>
    <div style="height: 400px; border: solid 1px green"></div>
    <div style="height: 100px"></div>
</div>
 </BODY>
</HTML>

Answer 4

The following code snippet presents a solution, which seems to be functioning correctly on my local machine but not on jsFiddle. I recommend testing it in your preferred code editor for better results.

<HTML>
 <HEAD>
  <SCRIPT LANGUAGE="JavaScript">
    var isWorking = false;
var lastScrollPosition
function adjust(oDiv) {
    if(oDiv.scrollTop > lastScrollPosition && !isWorking && oDiv.scrollTop % 400 > 300) {
        isWorking = true
        scroll(oDiv);
    } else
        lastScrollPosition = oDiv.scrollTop;
}

function scroll(div) {
    if(div.scrollTop % 400 > 10) {
        div.scrollTop = div.scrollTop + 10;
        lastScrollPosition = div.scrollTop;
        setTimeout(function(){scroll(div);}, 10);
    } else
        isWorking = false;
}
  </SCRIPT>
 </HEAD>

 <BODY>
  <div style="height: 440px; border: solid 1px red; overflow-Y: auto" onscroll="adjust(this)">
    <div style="height: 400px; border: solid 1px green"></div>
    <div style="height: 400px; border: solid 1px green"></div>
    <div style="height: 400px; border: solid 1px green"></div>
    <div style="height: 400px; border: solid 1px green"></div>
    <div style="height: 100px"></div>
</div>
 </BODY>
</HTML>

Answer 5

Answer №3

It is possible to achieve this feature using jQuery. I experimented with it by implementing it on the OnClick event in JavaScript. In your scenario, using onFocus or another appropriate event such as mouseover should be effective.

I trust that this information proves helpful.

Answer 6

It is possible to achieve this feature using jQuery. I experimented with it by implementing it on the OnClick event in JavaScript. In your scenario, using onFocus or another appropriate event such as mouseover should be effective.

I trust that this information proves helpful.

Upon reaching a specific milestone on the page, automatically scroll to the designated anchor point

Answer №1

Answer №2

Answer №3

Similar questions

Tips for aligning multiple columns within a Bootstrap 3 carousel

From PHP to JavaScript, the looping journey begins

Python struggles to find HTML elements when gathering information from a website through

Is there a way to asynchronously load image src URLs in Vue.js?

Styling with CSS or using tables: What should you choose?

Issue encountered while trying to download JSON file

Clicking on a row in the Gridview should trigger the expansion or collapse of the Nested

CSS: targeting the final item within a two-level menubar structure

Alignment of images at the center within a container div while maintaining a height of 100%

Navigating through content on a screen can be accomplished in two

Having difficulty pinpointing and deleting an added element using jQuery or JavaScript

managing commitments in TypeScript

Is it possible to transmit both HTML and PHP files using express.js?

Prevent Repeated Data Input in an Array using JavaScript

Using React to import and parse a CSV file

The background image on my CSS is not showing up

AJAX brings back the previous value from an array

Design my div layout to resemble a tree shape

The latest update to the Server Stats code mistakenly changes the channel to "undefined" instead of displaying the total number

Invoke the C# function in the code-behind using an AJAX call