Menu icon Foundation
Scroll to element and display message.

What would be the best way to scroll to an element and display a message next to that element when a button is clicked?

It's kind of like starting a joyride with only one list item... however I plan on adding two of these.

My idea is that I have a sign up and sign in button and when each is clicked, I want to to scroll down (if possible) and display a little notification type-of-thing above the appropriate form which will fade after a certain amount of time.

Any ideas? Thanks.

scroll to elementjoy ride

What would be the best way to scroll to an element and display a message next to that element when a button is clicked?

It's kind of like starting a joyride with only one list item... however I plan on adding two of these.

My idea is that I have a sign up and sign in button and when each is clicked, I want to to scroll down (if possible) and display a little notification type-of-thing above the appropriate form which will fade after a certain amount of time.

Any ideas? Thanks.

This post has been closed. No new replies can be added.

Rafi Benkual over 4 years ago

You can use jQuery to trigger a scroll-to onto another element on the page. The trigger the alert like this

 // Create the HTML
var $message = $('<div data-alert class="alert-box"><span></span><a href="#" class="close">&times;</a></div>');
// Fill it
$message.addClass(severity).children("span").text(message);
// Add the div and re-initialize foundation-alert for its parent
$("#errorArea").prepend($message).foundation(
    "alert", // libraries -- if it's undefined or "reflow" it will loop on all libs
    undefined, // method -- if it's undefined it will call init
    {speed: "slow", animation: "slideUp", callback: function() {}} // options -- optional, to customize the alert box
);