jQuery Redirect URL 2025 (4 Easy Methods)

Do you want to know how to use jQuery to redirect a URL?

jQuery is a popular JavaScript library that makes coding easier and faster. It’s beginner-friendly and helps simplify complex JavaScript tasks, making it a great choice for developers who want to speed up their workflow.

If you need to redirect users to a different URL when they visit your website, jQuery makes it super easy to do. With just a few lines of code, you can automatically send visitors to another page in no time.

4 Ways to Redirect a URL Using jQuery

I’ve shared some of the simplest methods you can use to redirect a page with jQuery.

Before using these methods, make sure to add the jQuery CDN in your HTML <head> section; otherwise, none of these methods will work in your HTML file.

Google CDN:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

jQuery Official CDN:

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

Microsoft CDN:

<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.6.0.min.js"></script>

Method 1: Using window.location.href (Standard Redirect)

$(document).ready(function() {
    window.location.href = "https://example.com";
});

If you’re looking for an effective and reliable redirection method, this approach is perfect for you.

In this method, I’m replacing the current page’s URL with a new one. So, whenever a user visits this page, they will be automatically redirected to the specified URL.

Using the window.location.href In JavaScript, I’m changing the current URL to a different one, redirecting the user to the desired destination.

Method	Keeps History?	Back Button Works?	Best For
`window.location.href`	✅ Yes	✅ Yes	Normal redirects

Method 2: Using window.location.replace (No Back Button)

$(document).ready(function() {
    window.location.replace("https://example.com");
});

If you want to redirect the user without adding an entry to their browser history, Method 2 is ideal, as it simply redirects without storing the previous page in the history.

This updates the current URL to a new one without saving it in the browser history.

In this method, I’m using the replace function to update the current webpage’s URL, making it function like a redirect.

Also See: How to use CSS to show/hide Div on click? (4 Simple Methods)

Method	Keeps History?	Back Button Works?	Best For
`window.location.replace`	`❌ No`	`❌ No`	Login/logout pages

Method 3: Using window.location.assign (Similar to href)

$(document).ready(function() {
    window.location.assign("https://example.com");
});

Using the assign Method, you can achieve a URL redirect. This method works similarly to href but explicitly loads a new page.

This method is ideal if you want to allow users to use the back button, as it retains the previous page in the browser history.

Method	Keeps History?	Back Button Works?	Best For
`window.location.assign`	`✅ Yes`	`✅ Yes`	Ensuring navigation is registered

Method 4: Using window.location.reload (Refresh the Page)

$(document).ready(function() {
    window.location.reload();
});

To redirect the page, you can use the reload method on the window.location property, which will refresh the page.

Ensure that the page is forcefully reloaded. If you want to load a fresh version without using the cache, this will do the job.

Method	Keeps History?	Back Button Works?	Best For
`window.location.reload`	`🚫 N/A`	`🚫 N/A`	Refreshing the current page

6 Practical Ways to Use jQuery for URL Redirection

Here are just a few examples of how you can use jQuery to redirect users effortlessly. 🚀

Redirect After Form Submission

$("form").submit(function(event) {
    event.preventDefault(); // Prevent default form submission
    window.location.href = "thank-you.html";
});

After a user submits a form, you can redirect them to a thank-you page or confirmation page.

Redirect Based on User Role

if (userRole === "admin") {
    window.location.href = "/admin-dashboard";
} else {
    window.location.href = "/user-dashboard";
}

If a user logs in, you can redirect them based on their role (admin, user, guest, etc.).

Redirect After a Delay

setTimeout(function() {
    window.location.href = "new-page.html";
}, 3000); // Redirects after 3 seconds

You can redirect users after a few seconds (e.g., a countdown before moving to another page).

Redirect Based on Device Type

if (/Mobi|Android/i.test(navigator.userAgent)) {
    window.location.href = "mobile-version.html";
}

Detect if a user is on mobile and redirect them to a mobile-friendly version of your site.

Redirect from an Old Page to a New One

if (window.location.pathname === "/old-page") {
    window.location.href = "/new-page";
}

If a page URL changes, you can use jQuery to automatically send users to the updated page.

Redirect After Clicking a Button

$("#redirectButton").click(function() {
    window.location.href = "new-url.html";
});

When users click a button, they can be redirected to another page.

Conclusion

By using these four methods, you can easily add a redirect to your website. Let me know in the comments which method you liked the most!

You might also be interested in learning How to take user input in JavaScript without prompt (4 simple methods), How to call two functions on onClick in JavaScript (3 easy steps), and How to call a JavaScript function on a button click in HTML (5 simple methods).

For more amazing tutorial videos and tips, subscribe to our SingleSyntax YouTube channel.

On this page