I am done with redirection to target page but what I want is to redirect to particular <div>
of the page. How can this be achieved?
10 Answers
You can do it in two ways.
1) [via Javascript (+jQuery)]
<a href="#" id="home">home</a>
$('#home').click(function(){
$(document).scrollTop(100) // any value you need
});
2) [via pure HTML]
<a href="#home_section">home</a>
<section id="home_section"></section>
-
Hey, I know it is a bit of an old answer, but can you explain (briefly) how the pure HTML solution works? Thanks!– JsleshemJul 7, 2017 at 18:02
-
1@Jsleshem The idea is simply that the word coming after the "#" character denotes the name of the div id. So when you redirect to a page containing many divs with different ids with the a URL like that /some_page/target_page#target_div_id you would go to that page and center your browser screen on the div that has the id of target_div_id Aug 6, 2017 at 4:02
<div id="go1">
<!-- content -->
</div>
<div id="go2">
<!-- content -->
</div>
<div id="go3">
<!-- content -->
</div>
...
Just append url id as below ,you are done !
news.html#go1
news.html#go2
news.html#go3
This is the easiest way for me
<li><a href="#prices">Prices</a></li> (This could be a paragraph or a button)</li>
<div id="prices">
// Prices section
</div>
You need to add id
attribute to that section of page you want to show and pass id
name at the end of url using hash (#
) symbol. For example you want to redirect user to div with id='test'
<div id="test">your section content</div>
Then you should use this url structure:
http://example.com/your_page.php?some_param=1#test
Basically you use anchor tags in HTML to get your job done. You'l probably be familiar with them as:
<a href = " "> </a>
As HTML convention, while defining a section, you can give each section an ID for identifiers :
<section id= "blahblah" ></section>
And you can redirect to the section by just mentioning them in the anchor tags :
<a href = "#blahblah"> </a>
You can link the html code with css.
In c#
Response.Redirect("http://www.example.com/index.aspx#id_in_css");
Here are two conditions,
1) If you want to redirect to div from different page:
<a href="page.html#div-panel">Page</a>
if(window.location.href.includes("div-panel"))
{
$(document).scrollTop(450);
}
2) If you want to redirect to div in same page:
<button id="button-click">Panel</button>
$('#button-click').click(function(){
$(document).scrollTop(450);
});
Give that section an id (lets say: section1
) and then the redirect url will be http://www.sample.com/page#section1
.
Note: the # and the keyword, that's the id of the section you want your browser to scroll to.
Read more about Fragment Identifier here
If you really want that smooth sliding to the designed section, here's a quick step-by-step:
In the section you want, create an
id
property, i.e:<section id="products">
next, using an anchor tag, insert # + the id for the section on the
href
property:<a href="#products">
Now, once clicked, the page will center the section pointed on the anchor tag. But this will happen brutely. In order to smooth the scrolling process, in your CSS file, use this snippet:
html {
scroll-behavior: smooth;
}
And that's the simplest way!
There is also ways for doing it with native JavaScript and JQuery. For more, i recommend the article on CSS Tricks -> https://css-tricks.com/snippets/jquery/smooth-scrolling/
first you need add id where you want to redirect
<section class="com-padd com-padd-redu-top" id="deals-home">
than add
< a href="{% url 'home' %}#deals-home">Go to Home that page</a>