Forgot Password ??

PHP , ASP , ASP.NET, VB.NET, C#, Java , jQuery , Android , iOS , Windows Phone

	Registered : 109,037

HOME > .NET Framework > Forum > สอบถามวิธีการทำเว็บแบบ MVC ให้ใช้ Scroll to Top หน่อยครับ

สอบถามวิธีการทำเว็บแบบ MVC ให้ใช้ Scroll to Top หน่อยครับ

เริ่มหัวข้อใหม่

Agility

โพสกระทู้ ( 424 )
บทความ ( 0 )

http://www.jqueryscript.net/other/Smooth-Page-Scroll-to-Top-with-jQuery.html

จากลิงค์ด้านบน จะสามารถประยุกต์ยังไงให้สามารถใช้กับ ASP.Net MVC ได้ครับ รบกวนผู้รู้ชีแนะนำด้วยนะ ผมลองดูแล้วไม่สำเร็จ

Tag : .NET, Web (ASP.NET), C#

Date : 2016-10-18 16:12:48

By : Agility

View : 1356

Reply : 3

No. 1

TC Admin

โพสกระทู้ ( 74,058 )
บทความ ( 838 )

ถ้าแทรกพวก Js, Css ครบ ก็น่าจะได้แล้วนะครับ

ใช้ jQuery ทำปุ่ม Scroll to top หรือ Back to top เพื่อขยับตำแหน่งของ Page ขึ้นไปบนสุด

https://www.thaicreate.com/community/jquery-animated-scroll-to-top.html

Date : 2016-10-18 18:04:33

By : mr.win

No. 2

Agility

โพสกระทู้ ( 424 )
บทความ ( 0 )

จากโค้ดด้านล่าง ตอนนี้ติดขั้นตอนกดปุ่มเพื่อให้เลื่อนขึ้นมาบนสุดของเว็บ ไม่ทราบว่าผมทำตรงไหนไม่ถูกต้องหรอครับ

'----------------ส่วนที่ติดปัญหาอยู่ -----------------
$('#back-top').click(function () {
$('#content,#header').animate({
scrollTop: 0
}, 'fast');
return false;
})

Code

<script src="~/Scripts/jquery-1.10.2.min.js"></script>

<script type="text/javascript">
    $(window).scroll(function () {
        if ($(window).scrollTop() > 300) {
            $('#back-top').fadeIn('fast');
        } else {
            $('#back-top').fadeOut('fast');
        }
    })

    $('#back-top').click(function () {
        $('#content,#header').animate({
            scrollTop: 0
        }, 'fast');
        return false;
    })
</script>

<style>
    #back-top {
        display: none;
        width: 60px;
        height: 60px;
        position: fixed;
        bottom: 40px;
        right: 40px;
        background: url("../../Images/up-arrow.png") green no-repeat center 43%;
        text-indent:-9999px;
        border-radius:30px;
    }

    #back-top:hover{
        background-color:#000;
    }
</style>

<div id="content">
    <div id="header">
        <h1>Scroll on top the page</h1>
        <p>00000000000000000000000</p>
        <p>11111111111111111111111</p>
        <p>22222222222222222222222</p>
        <p>33333333333333333333333</p>
        <p>44444444444444444444444</p>
        <p>55555555555555555555555</p>
        <p>66666666666666666666666</p>
        <p>77777777777777777777777</p>
        <p>88888888888888888888888</p>
        <p>99999999999999999999999</p>
        <p>00000000000000000000000</p>
        <p>11111111111111111111111</p>
        <p>22222222222222222222222</p>
        <p>33333333333333333333333</p>
        <p>44444444444444444444444</p>
        <p>55555555555555555555555</p>
        <p>66666666666666666666666</p>
        <p>77777777777777777777777</p>
        <p>88888888888888888888888</p>
        <p>99999999999999999999999</p>

        <p id="back-top">
            <a href="#top"><span></span>Back to Top</a>
        </p>
    </div>
</div>

Date : 2016-10-19 11:40:41

By : Agility

No. 3

TaoZaZa

โพสกระทู้ ( 151 )
บทความ ( 0 )

เผื่อเป็นอีกแนวทางครับ ผิดถูกยังไงก็ขออภัยไว้น่ะที่นี้ด้วยครับ

Code

<html>
<head>
	<title></title>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

	<script type="text/javascript">
	jQuery(document).ready(function () {
		var offset = 220;
		var duration = 500;
		jQuery(window).scroll(function () {
			if (jQuery(this).scrollTop() > offset) {
				jQuery('.back-to-top').fadeIn(duration);
			} else {
				jQuery('.back-to-top').fadeOut(duration);
			}
		});

		jQuery('.back-to-top').click(function (event) {
			event.preventDefault();
			jQuery('html, body').animate({ scrollTop: 0 }, duration);
			return false;
		});
	});
	</script>

	<style>
	.back-to-top {
		position: fixed;
		bottom: 2em;
		right: 1em;
		text-decoration: none;
		color: #FF5252;
		background-color: rgba(235, 235, 235, 0.80);
		font-size: 12px;
		padding: 1em;
		display: none;
		z-index: 2000;
	}

	.back-to-top:hover,.back-to-top:focus {
		background-color: rgba(135, 135, 135, 0.50);
		color: Green;
	}
	</style>	
</head>
<body>


	<div id="content">
		<div id="header">
			<h1>Scroll on top the page</h1>
			<p>00000000000000000000000</p>
			<p>11111111111111111111111</p>
			<p>22222222222222222222222</p>
			<p>33333333333333333333333</p>
			<p>44444444444444444444444</p>
			<p>55555555555555555555555</p>
			<p>66666666666666666666666</p>
			<p>77777777777777777777777</p>
			<p>88888888888888888888888</p>
			<p>99999999999999999999999</p>
			<p>00000000000000000000000</p>
			<p>11111111111111111111111</p>
			<p>22222222222222222222222</p>
			<p>33333333333333333333333</p>
			<p>44444444444444444444444</p>
			<p>55555555555555555555555</p>
			<p>66666666666666666666666</p>
			<p>77777777777777777777777</p>
			<p>88888888888888888888888</p>
			<p>99999999999999999999999</p>


		</div>
	</div>

	<a href="#" class="back-to-top">Top</a>
</body>
</html>

Date : 2016-10-20 10:46:41

By : taotechnocom

ค้นหาข้อมูล

แสดงความคิดเห็น

Re : สอบถามวิธีการทำเว็บแบบ MVC ให้ใช้ Scroll to Top หน่อยครับ

รายละเอียด

เพื่อความเรียบร้อยของข้อความ ควรจัดรูปแบบให้พอดีกับขนาดของหน้าจอ เพื่อง่ายต่อการอ่านและสบายตา และตรวจสอบภาษาไทยให้ถูกต้อง

อัพโหลดแทรกรูปภาพ

Notice

เพื่อความปลอดภัยของเว็บบอร์ด ไม่อนุญาติให้แทรก แท็ก [img]....[/img] โดยการอัพโหลดไฟล์รูปจากที่อื่น เช่นเว็บไซต์ ฟรีอัพโหลดต่าง ๆ
อัพโหลดแทรกรูปภาพ ให้ใช้บริการอัพโหลดไฟล์ของไทยครีเอท และตัดรูปภาพให้พอดีกับสกรีน เพื่อความโหลดเร็วและไฟล์ไม่ถูกลบทิ้ง

เพื่อความปลอดภัยและการตรวจสอบ กระทู้ที่แทรกไฟล์อัพโหลดไฟล์จากที่อื่น อาจจะถูกลบทิ้ง

โดย

อีเมล์

บวกค่าให้ถูก