[Solved] Scroll to particular part of page using jQuery

Nadeem15...

SOLVED CLOSED ACTIVE ANSWERED
User: Nadeem157
Posted: on Sep 09, 2014 09:57 AM
Forum: jQuery and jQuery Plugins
Answer: 1
Views: 3173

Hi, I have a site which has all navigations in one page. for Example: Home, About, Work, etc. All these navigations are in single page. The scenario is that, I want whenever a user clicks on any of the link, it should redirect to the particluar section and also the url should get changed according to the section.For me, I managed to change the URL in the URL tab, but it is not taking me to the particular section. Please see the code for your reference:

<script type="text/javascript" src="js/pushstate-anchor.js"></script>
<script type="text/javascript">
   $('a').on('click', function(event) {
     event.preventDefault();
     var title = $(this).attr('href');
     window.history.pushState(“”, title, "/" + title);
     $('html, body').animate({
          scrollTop: $("#" + title).offset().top
          }, 2000);
   });
</script>

Also, see the HTML's

<!-- Navigations -->
<ul class="slimmenu">
    <li><a href="torq" data-ps2id-offset="100">home</a> </li>
    <li><a is="pushstate-anchor" href="about" title="About" state='{"message":"New State!"}'
        id="test">About</a> </li>
    <li><a is="pushstate-anchor" href="work" title="Work" state='{"message":"New State!"}'>
        work</a> </li>
    <li><a is="pushstate-anchor" href="services" title="Services" state='{"message":"New State!"}'>
        services</a> </li>
    <li><a is="pushstate-anchor" href="contact" title="Contact" state='{"message":"New State!"}'>
        contact</a> </li>
</ul>
<section class="about">
        <div id="about">
	<div class="container">
		<div class="sixteen columns">
			<h1>about us</h1>
		</div>
		<div class="sixteen columns">
			<div class="sub-text-line"></div>
		</div>
		<div class="sixteen columns">
			<div class="sub-text link-svgline">We are a creative led digital agency that offers highly measurable and targeted results for brands online</div>
		</div>
		<div class="clear"></div>
		<div class="four columns">
			<div class="about-box1" data-scroll-reveal="enter left move 300px over 1s after 0.5s">
                                <div class="about-box-icon"><img src="images/Strategy.png"> </div>
                                <h5 class="clr">STRATEGY <br/>AND PLANNING</h5>
                                    <p>Creating an online roadmap for Brands, Online Brand Strategy and Media Planning.</p>
                                    <br/>
			</div>
			<div class="about-box1" data-scroll-reveal="enter left move 300px over 1s after 0.7s">
				<div class="about-box-icon"><img src="images/Seach-Engine.png"></div>
                                    <h5 class="clr">SEARCH ENGINE <br/>MARKETING</h5>
				<p>Keyword Generation, Remarketing, Competitor Search Marketing, Tracking Analysis and Reporting</p>
			</div>
			<div class="about-box1" data-scroll-reveal="enter left move 300px over 1s after 0.9s">
				<div class="about-box-icon"><img src="images/socail-Media-MArketing.png"></div>
                                    <h5 class="clr">SOCIAL MEDIA <br/>MARKETING</h5>
				<p>Engagement Initiatives across platforms, Online Reputation Management, Customer Attractions and Retention Programs </p>
			</div>
		</div>
		<div class="eight columns remove-bottom ads" data-scroll-reveal="enter bottom move 400px over 1s after 0.1s">
			<img src="images/ipad.png" alt=""/>
		</div>
		<div class="four columns">
			<div class="about-box" data-scroll-reveal="enter right move 300px over 1s after 0.5s">
				<div class="about-box-icon"><img src="images/Delivering.png"></div>
                                    <h5 class="clr">DELIVERING INTEGRATED  <br/>CAMPAIGNS</h5>
				<p>Search, SEO, Media Buying, Social Media, E-mail Marketing, Content Management, Mobile App and Affiliate Marketing</p>
			</div>
			<div class="about-box" data-scroll-reveal="enter right move 300px over 1s after 0.7s">
				<div class="about-box-icon"><img src="images/Creative-Development.png"></div>
                                    <h5 class="clr">CREATIVE <br/>DEVELOPMENT</h5>
				<p>User Experience, Interactive Designs and Usability Testing.</p>
                                    <br/>
			</div>
			<div class="about-box" data-scroll-reveal="enter right move 300px over 1s after 0.9s">
				<div class="about-box-icon"><img src="images/Cutting-Edge.png"></div>
                                    <h5 class="clr">CUTTING EDGE TOOLS AND <br/>PROCESSES</h5>
				<p>SEM and SEO tools, Analytics and Custom Reporting tools for Analytics and Optimization</p>
			</div>
		</div>
	</div>
            </div>
            
        <div class="facts">
		<div class="container">
			<div class="eight columns">
				<div class="facts-wrap">
                                            <p><span>&#39;</span> The agency has been able to bring out a perceptive change in the image of our company through our new web site. We can now address an international audience as well.  
                                                Web sites or for that matter any communication in our business is perceived to be dry and run-of- the mill. <br/>Our web site is fresh in design, is interactive and informative.<span>&#39;</span></p>
                                        <br/>
                                        <h4>Subrat Mishra, M.D., <br/>IRA</h4>       
				</div>
			</div>
			<div class="eight columns">
				<div class="facts-wrap">
                                        <p><span>&#39;</span>TORQ has captured the essence of our brand. <br/>We clearly wanted to be different in the look and feel. <br/> We are able to provide a unique experience to our customers. <br/>Well done ! TORQ.<span>&#39;</span></p>
                                        <br/><br/><br/>
                                        <h4>Rahim Muscutwalla, M.D., <br/>Gabmus Jewels</h4>
				</div>
			</div>
				
				
		</div>
	</div>
		
</section>

Please help.

Download FREE API for Word, Excel and PDF in ASP.Net

Azim

0 1

Reply
ANSWER
User: Azim
Replied: on Sep 09, 2014 09:58 AM
Report

Please refer this example

HTML

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <style type="text/css">
        body
        {
            font-family: Arial;
            font-size: 10pt;
        }
    </style>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script type="text/javascript">
        $(function () {
            $("#links a").bind("click", function () {
                $('html, body').animate({
                    'scrollTop': $('#' + $(this).attr('class')).offset().top
                }, 2000);
            });
        });
    </script>
</head>
<body>
    <table id="links" border="0" cellpadding="5" cellspacing="5">
        <tr>
            <td>
                <a class="section1" href="javascript:;">Scroll to Section 1</a>
            </td>
            <td>
                <a class="section2" href="javascript:;">Scroll to Section 2</a>
            </td>
            <td>
                <a class="section3" href="javascript:;">Scroll to Section 3</a>
            </td>
            <td>
                <a class="section4" href="javascript:;">Scroll to Section 4</a>
            </td>
        </tr>
    </table>
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <div style="width: 700px">
        <h2 id="section1">
            Section 1</h2>
        <p>
            This is a test content. This is a test content. This is a test content. This is
            a test content. This is a test content. This is a test content. This is a test content.
            This is a test content. This is a test content. This is a test content. This is
            a test content. This is a test content. This is a test content. This is a test content.
            This is a test content. This is a test content. This is a test content. This is
            a test content. This is a test content. This is a test content. This is a test content.
            This is a test content. This is a test content. This is a test content. This is
            a test content. This is a test content. This is a test content. This is a test content.
            This is a test content. This is a test content.</p>
        <br />
        <h2 id="section2">
            Section 2</h2>
        <p>
            This is a test content. This is a test content. This is a test content. This is
            a test content. This is a test content. This is a test content. This is a test content.
            This is a test content. This is a test content. This is a test content. This is
            a test content. This is a test content. This is a test content. This is a test content.
            This is a test content. This is a test content. This is a test content. This is
            a test content. This is a test content. This is a test content. This is a test content.
            This is a test content. This is a test content. This is a test content. This is
            a test content. This is a test content. This is a test content. This is a test content.
            This is a test content. This is a test content.</p>
        <br />
        <h2 id="section3">
            Section 3</h2>
        <p>
            This is a test content. This is a test content. This is a test content. This is
            a test content. This is a test content. This is a test content. This is a test content.
            This is a test content. This is a test content. This is a test content. This is
            a test content. This is a test content. This is a test content. This is a test content.
            This is a test content. This is a test content. This is a test content. This is
            a test content. This is a test content. This is a test content. This is a test content.
            This is a test content. This is a test content. This is a test content. This is
            a test content. This is a test content. This is a test content. This is a test content.
            This is a test content. This is a test content.</p>
        <br />
        <h2 id="section4">
            Section 4</h2>
        <p>
            This is a test content. This is a test content. This is a test content. This is
            a test content. This is a test content. This is a test content. This is a test content.
            This is a test content. This is a test content. This is a test content. This is
            a test content. This is a test content. This is a test content. This is a test content.
            This is a test content. This is a test content. This is a test content. This is
            a test content. This is a test content. This is a test content. This is a test content.
            This is a test content. This is a test content. This is a test content. This is
            a test content. This is a test content. This is a test content. This is a test content.
            This is a test content. This is a test content.</p>
        <br />
        <h2>
            Section 5</h2>
        <p>
            This is a test content. This is a test content. This is a test content. This is
            a test content. This is a test content. This is a test content. This is a test content.
            This is a test content. This is a test content. This is a test content. This is
            a test content. This is a test content. This is a test content. This is a test content.
            This is a test content. This is a test content. This is a test content. This is
            a test content. This is a test content. This is a test content. This is a test content.
            This is a test content. This is a test content. This is a test content. This is
            a test content. This is a test content. This is a test content. This is a test content.
            This is a test content. This is a test content.</p>
        <br />
        <h2>
            Section 6</h2>
        <p>
            This is a test content. This is a test content. This is a test content. This is
            a test content. This is a test content. This is a test content. This is a test content.
            This is a test content. This is a test content. This is a test content. This is
            a test content. This is a test content. This is a test content. This is a test content.
            This is a test content. This is a test content. This is a test content. This is
            a test content. This is a test content. This is a test content. This is a test content.
            This is a test content. This is a test content. This is a test content. This is
            a test content. This is a test content. This is a test content. This is a test content.
            This is a test content. This is a test content.</p>
        <br />
    </div>
</body>
</html>

Demo

I agree, here is the link: https://www.e-iceblue.com/Introduce/spire-office-for-net-free.html

[Solved] Scroll to particular part of page using jQuery

Company

Explore

Follow us

Contact Us