Adding a page redirection to the selected text via the page link

user_7652516 0
Viewed 44

I want to try create link on my website which will be redirect to selected text when user enter via webbrowser.

Example :

My main domain : www.example111.com

My HTML code looks like :

<p>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam vel ornare nibh. Fusce mattis felis ex, non porta risus lacinia sed. In dignissim ex at est maximus, ut aliquam lorem efficitur. Pellentesque sit amet finibus nulla. Nulla sit amet lacus gravida, convallis nisl at, aliquet turpis. Mauris pretium lacinia magna, nec gravida massa laoreet id. Praesent est ligula, ornare ac tristique vel, congue sit amet lacus. In semper eros at finibus maximus. In ultrices aliquet neque, eget malesuada lacus lobortis eget. Maecenas non lobortis leo, in viverra odio. In cursus sem vel sem pharetra, rhoncus ultrices odio aliquam. Integer vestibulum massa sit amet tortor fringilla fringilla vel nec odio. In dapibus fringilla urna rutrum luctus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nulla et urna rhoncus, pharetra ante nec, dictum dui.
</p>

<p>
Mauris ac ultrices ex, non dapibus velit. Praesent eget malesuada tortor. Aenean tempus dolor sit amet eleifend posuere. Cras efficitur auctor ex, in gravida ligula viverra sit amet. Quisque convallis diam sit amet magna hendrerit facilisis. Integer eleifend tortor neque, quis iaculis diam porttitor vitae. Suspendisse molestie pretium urna. Praesent maximus cursus diam, eget egestas nisl interdum non.
</p>


<p>
Nullam sit amet pretium lacus, sed mollis lorem. Phasellus quis purus lectus. Etiam rhoncus non urna ac iaculis. Nulla quis neque nisl. Ut mollis erat at mattis condimentum. Nullam in orci et ipsum varius tincidunt vitae vitae purus. Morbi at tortor non purus elementum tincidunt non eget metus. Vivamus luctus neque odio, ac euismod felis tincidunt ut. Praesent facilisis pretium volutpat. Etiam vel pretium ante, at volutpat diam. Nullam pretium neque quis leo tincidunt, sed vulputate dui iaculis.
</p>

<p>
Cras vulputate metus placerat turpis congue, non aliquam sem iaculis. Mauris fermentum tortor sit amet ante egestas eleifend. Morbi gravida, dui sit amet lobortis imperdiet, ligula diam mattis tellus, quis luctus lacus lacus vitae nisi. Vivamus feugiat vitae ipsum vitae dictum. In sollicitudin mi at augue aliquam, hendrerit ultrices lorem volutpat. Proin tincidunt, nisi quis maximus volutpat, augue tellus egestas arcu, a ullamcorper felis ante ut magna. Mauris justo dui, varius ac tellus sed, cursus euismod felis. Nulla nec justo condimentum, sodales risus in, faucibus urna. Phasellus sagittis varius tempus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed accumsan felis non diam feugiat, ut imperdiet nisl dictum.
</p>

<p>
Aliquam ullamcorper nulla felis, bibendum consequat urna molestie et. Sed ex enim, gravida eget facilisis non, suscipit sit amet erat. Cras varius turpis sit amet mi lobortis faucibus. Quisque eu laoreet purus, at aliquam odio. Praesent molestie eu metus placerat placerat. Integer tempor libero ut odio vestibulum laoreet. Donec bibendum purus sed purus mattis, non volutpat leo ullamcorper. Nullam hendrerit volutpat nisi, ac viverra turpis venenatis ut. Sed laoreet nibh eu orci blandit aliquam sit amet ac neque.
</p>

And now i want to have 5 redirect links on my website.

  1. www.example111.com/Lorem

It will redirect to first scrolled down element "Lorem ipsum dolor sit amet~" .

  1. www.example111.com/Mauris

It will redirect to second paragraph and needs to be visible like this : enter image description here

  1. www.example111.com/Nullam

And it should redirect and starts from enter image description here

Is it possible to do in any simple way? How can i do that? I know i can use javascript to scrolldown webpage to selected div etc , but i'm looking for exacly this as as i show in my example with links.

css html jquery javascript
1 Answers

For this simply add id to your html tag.

and use # in url to redirect to specific page.

www.example111.com#Nullam

In HTML

<div id="Nullam"> Nullam content </div>

There is a limitation of above solution. It won't work if user scrolls the page and do a refresh.

In order to make the redirection work, you may take help of JS

<body onload="scrollInView()"></body>



function scrollInView() {
  document.getElementById('Nullam').scrollIntoView(true);
}

Edit:

<body onload="scrollInView()"

 <script>
     function scrollInView() {
      const url = window.location.href;
      const hashIndex  = url.lastIndexOf("#");
      const id = url.substr(hashIndex+1, url.length - (hashIndex+1));
       const elem = document.getElementById(id);
      if(elem) {
        elem.scrollIntoView({ behavior: 'smooth', block: 'nearest', inline: 'end' });
      }
     }
   </script>

JSFIddle https://jsfiddle.net/q0ex8mLz/ - copy all code in a html file

user_44522220
Related