Navigate to another page upon click

**theremotedr** · 05-09-2015, 03:16 PM

Hi,
Can you advise such a script that would allow me to click on a link in one page & be taken to another page then smooth scroll to an element.
Did take a look in the scripts sections but did not see anything.

Many thanks.

**Beverleyh** · 05-09-2015, 03:41 PM

Loads of examples on Google https://www.google.co.uk/search?q=li...J-fR7Qboi4GIBw

**theremotedr** · 05-09-2015, 03:43 PM

I did also look there but would of like one from this forum.

**Beverleyh** · 05-09-2015, 03:52 PM

I couldn't find any examples posted in the forum either. Looks like you'll need to test out a few options from Google and make a selection from there. When you've made you're choice, post back if you need any help and hopefully someone can help you.

**theremotedr** · 05-09-2015, 09:23 PM

Ok,
So i was not able to find what i wanted.

I have now added an anchor to each of my pages & can now jump from page to page upon clicking a link to the position "Item Selection"
This was for iphone purposes to bring the "Item Selection" list into view on the page.

I am wondering if there is a small piece of code etc that will disable this action for the pc but to still apply it to the iphone.

Take a look here and you will see that once loaded the page moves up a touch.

Go here http://www.theremotedoctor.co.uk/index.html
Then select any of the tabs followed by a car makers name.

Many thanks.

**molendijk** · 05-09-2015, 09:25 PM

DynamicDrive does have the script you want, see http://www.dynamicdrive.com/dynamici...markscroll.htm

**theremotedr** · 05-09-2015, 09:33 PM

Hi,
Thanks but i needed it to click link on one page but open another page then scroll to element.

**molendijk** · 05-09-2015, 11:41 PM

Thats's exactly what the script offers you! It's the third demo ('Go to Test Section C on another page'). I tested it. It works like a charm.

**molendijk** · 05-10-2015, 12:05 AM

dd1.html:

Code:

<!doctype html>
<html >
<head>

<title>&nbsp;</title>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

</head>

<body>

<a href="dd2.html?scrollto=sectionc">Scroll to Section C dd2.html</a>

</body>

</html>

dd2.html:

Code:

<!doctype html>
<html >
<head>

<title>&nbsp;</title>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

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

<!-- Scrolling HTML bookmarks- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
This notice MUST stay intact for legal use
Visit Project Page at http://www.dynamicdrive.com for full source code  -->
<script>
var bookmarkscroll={
	setting: {duration:1000, yoffset:0}, //{duration_of_scroll_milliseconds, offset_from_target_element_to_rest}
	topkeyword: '#top', //keyword used in your anchors and scrollTo() to cause script to scroll page to very top

	scrollTo:function(dest, options, hash){
		var $=jQuery, options=options || {}
		var $dest=(typeof dest=="string" && dest.length>0)? (dest==this.topkeyword? 0 : $('#'+dest)) : (dest)? $(dest) : [] //get element based on id, topkeyword, or dom ref
		if ($dest===0 || $dest.length==1 && (!options.autorun || options.autorun && Math.abs($dest.offset().top+(options.yoffset||this.setting.yoffset)-$(window).scrollTop())>5)){
			this.$body.animate({scrollTop: ($dest===0)? 0 : $dest.offset().top+(options.yoffset||this.setting.yoffset)}, (options.duration||this.setting.duration), function(){
				if ($dest!==0 && hash)
					location.hash=hash
			})
		}
	},

	urlparamselect:function(){
		var param=window.location.search.match(/scrollto=[\w\-_,]+/i) //search for scrollto=divid
		return (param)? param[0].split('=')[1] : null
	},
	
	init:function(){
		jQuery(document).ready(function($){
			var mainobj=bookmarkscroll
			mainobj.$body=(window.opera)? (document.compatMode=="CSS1Compat"? $('html') : $('body')) : $('html,body')
			var urlselectid=mainobj.urlparamselect() //get div of page.htm?scrollto=divid
			if (urlselectid) //if id defined
				setTimeout(function(){mainobj.scrollTo(document.getElementById(urlselectid) || $('a[name='+urlselectid+']:eq(0)').get(0), {autorun:true})}, 100)
			$('a[href^="#"]').each(function(){ //loop through links with "#" prefix
				var hashvalue=this.getAttribute('href').match(/#\w+$/i) //filter links at least 1 character following "#" prefix
				hashvalue=(hashvalue)? hashvalue[0].substring(1) : null //strip "#" from hashvalue
				if (this.hash.length>1){ //if hash value is more than just "#"
					var $bookmark=$('a[name='+this.hash.substr(1)+']:eq(0)')
					if ($bookmark.length==1 || this.hash==mainobj.topkeyword){ //if HTML anchor with given ID exists or href==topkeyword
						if ($bookmark.length==1 && !document.all) //non IE, or IE7+
							$bookmark.html('.').css({position:'absolute', fontSize:1, visibility:'hidden'})
						$(this).click(function(e){
							mainobj.scrollTo((this.hash==mainobj.topkeyword)? mainobj.topkeyword : $bookmark.get(0), {}, this.hash)
							e.preventDefault()
						})
					}
				}
			})
		})
	}
}

bookmarkscroll.init()
</script>

</head>



<body>

<br>dd2<br>dd2<br>dd2<br>dd2<br>dd2<br>dd2<br>dd2<br>dd2<br>dd2<br>dd2<br>dd2<br>dd2<br>dd2<br>dd2<br>dd2<br>dd2<br>dd2<br>dd2<br>dd2<br>dd2<br>dd2<br>dd2<br>dd2<br>dd2<br>dd2<br>dd2<br>dd2<br>dd2<br>dd2<br>dd2<br>dd2<br>dd2<br>dd2<br>dd2<br>dd2<br>dd2<br>dd2<br>dd2<br>dd2<br>dd2<br>dd2<br>dd2<br>dd2<br>dd2<br>dd2<br>dd2<br>dd2<br>dd2<br>dd2<br>dd2<br>dd2<br>dd2<br>dd2<br>dd2<br>dd2<br>dd2<br>dd2<br>dd2<br>dd2<br>dd2<br>dd2<br>dd2<br>dd2<br>dd2<br>dd2<br>dd2<br>dd2<br>dd2<br>dd2<br>dd2<br>dd2<br>dd2<br>dd2<br>dd2<br>dd2<br>dd2<br>dd2<br>dd2<br>dd2<br>dd2<br>dd2<br>dd2<br>dd2<br>dd2<br>dd2<br>dd2<br>dd2<br>dd2<br>dd2<br>dd2<br>dd2<br>dd2<br>dd2<br>dd2<br>dd2<br>dd2<br>dd2<br>dd2<br>dd2<br>dd2<br>dd2<br>dd2<br>dd2<br>dd2<br>dd2<br>dd2<br>dd2<br>dd2<br>dd2<br>dd2<br>dd2<br>dd2<br>dd2<br>dd2<br>dd2<br>dd2<br>dd2<br>dd2<br>dd2<br>dd2<br>dd2<br>dd2<br>dd2<br>dd2<br>dd2<br>dd2<br>dd2<br>dd2<br>dd2<br>dd2<br>dd2<br>dd2<br>dd2<br>dd2<br>dd2<br>dd2<br>dd2<br>dd2<br>dd2<br>dd2<br>dd2<br>dd2<br>dd2<br>dd2<br>dd2<br>dd2<br>dd2<br>dd2<br>dd2<br>dd2<br>dd2<br>dd2<br>dd2<br>dd2<br>dd2<br>dd2<br>dd2<br>dd2<br>dd2<br>dd2

<div id="sectionc">section c</div>

</body>

</html>

**theremotedr** · 05-10-2015, 09:21 AM

Morning,
I think i have set it up as shown but it does not work for me.
Please can you check what i have done & advise.

I have added the js file.
I have added the script to each page header.

My id code is <h2 id="selection">ITEM SELECTION....</h2>

Here are the links on each page.

<li><a href="karaudi.html?scrollto=selection">Audi</a>
<li><a href="karbmw.html?scrollto=selection">Bmw</a></li>
<li><a href="karfiat.html?scrollto=selection">Fiat</a></li>
etc
etc
etc

Here is a page you can look at http://www.theremotedoctor.co.uk/acc...llto=selection